欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

绚丽的图片文字 跟随过渡切换焦点图设计

程序员文章站 2022-04-27 18:37:38
...

绚丽的图片文字 跟随过渡切换焦点图设计
            
    
    博客分类: JavaScript/Jquery htmlcssjqueryjsweb

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Elastic Image Slideshow with Thumbnail Preview</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Elastic Image Slideshow with Thumbnail Preview" />
        <meta name="keywords" content="jquery, css3, responsive, image, slider, slideshow, thumbnails, preview, elastic" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />
		<noscript>
			<link rel="stylesheet" type="text/css" href="css/noscript.css" />
		</noscript>
   </head>
    <body>
        <div class="container">
            <h1>Elastic Image Slideshow with Thumbnail Preview</h1>
            <div class="wrapper">
                <div id="ei-slider" class="ei-slider">
                    <ul class="ei-slider-large">
						<li>
                            <img src="images/large/6.jpg" alt="image06"/>
                            <div class="ei-title">
                                <h2>Passionate</h2>
                                <h3>Seeker</h3>
                            </div>
                        </li>
                        <li>
                            <img src="images/large/1.jpg" alt="image01" />
                            <div class="ei-title">
                                <h2>Creative</h2>
                                <h3>Duet</h3>
                            </div>
                        </li>
                        <li>
                            <img src="images/large/2.jpg" alt="image02" />
                            <div class="ei-title">
                                <h2>Friendly</h2>
                                <h3>Devil</h3>
                            </div>
                        </li>
                        <li>
                            <img src="images/large/3.jpg" alt="image03"/>
                            <div class="ei-title">
                                <h2>Tranquilent</h2>
                                <h3>Compatriot</h3>
                            </div>
                        </li>
                        <li>
                            <img src="images/large/4.jpg" alt="image04"/>
                            <div class="ei-title">
                                <h2>Insecure</h2>
                                <h3>Hussler</h3>
                            </div>
                        </li>
                        <li>
                            <img src="images/large/5.jpg" alt="image05"/>
                            <div class="ei-title">
                                <h2>Loving</h2>
                                <h3>Rebel</h3>
                            </div>
                        </li>
                        <li>
                            <img src="images/large/7.jpg" alt="image07"/>
                            <div class="ei-title">
                                <h2>Crazy</h2>
                                <h3>Friend</h3>
                            </div>
                        </li>
                    </ul><!-- ei-slider-large -->
                    <ul class="ei-slider-thumbs">
                        <li class="ei-slider-element">Current</li>
						<li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>
                        <li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
                        <li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>
                        <li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>
                        <li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>
                        <li><a href="#">Slide 5</a><img src="images/thumbs/5.jpg" alt="thumb05" /></li>
                        <li><a href="#">Slide 7</a><img src="images/thumbs/7.jpg" alt="thumb07" /></li>
                    </ul><!-- ei-slider-thumbs -->
                </div><!-- ei-slider -->
                <div class="reference">
					<p class="demos"><a href="index.html">Demo 1</a> | <span>Demo 2 (with autoplay)<span></p>

                    <p>Resize the window to see the slider adjusting</p>
                </div>
            </div><!-- wrapper -->
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.eislideshow.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#ei-slider').eislideshow({
					animation			: 'center',
					autoplay			: true,
					slideshow_interval	: 3000,
					titlesFactor		: 0
                });
            });
        </script>
    </body>
</html>

 

  • 绚丽的图片文字 跟随过渡切换焦点图设计
            
    
    博客分类: JavaScript/Jquery htmlcssjqueryjsweb
  • 大小: 53.2 KB