<!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>
相关推荐
jQuery背景和banner图片一起切换全屏焦点图切换代码
一款图片遮罩层jquery特效,当鼠标移动到图片上后,显示图片文字以及热度等信息。 鼠标在不同图片之间来回切换,遮罩层也跟随不断移动。 相关效果链接:jQuery磁性透明图层跟随鼠标移动图片特效 代码版权归环球网...
jquery跟随鼠标在图片之间不断切换的透明遮罩效果.rarjquery跟随鼠标在图片之间不断切换的透明遮罩效果.rarjquery跟随鼠标在图片之间不断切换的透明遮罩效果.rarjquery跟随鼠标在图片之间不断切换的透明遮罩效果....
javaScript 文字跟随鼠标
authorware 文字跟随鼠标移动 文字跟随鼠标移动 文字跟随鼠标移动
自定义TabHost实现背景图片随选项卡切换滑动效果
简单实用原生js实现带缩略图文字说明左右轮播切换相册插件下载。一款基于原生JavaScript实现图片相册幻灯轮播图特效插件,没有引入任何jQuery库,短短数行原生php中文网实现。
跟随手指移动图片
跟随鼠标的文字.rar跟随鼠标的文字.rar跟随鼠标的文字.rar跟随鼠标的文字.rar跟随鼠标的文字.rar跟随鼠标的文字.rar跟随鼠标的文字.rar跟随鼠标的文字.rar跟随鼠标的文字.rar跟随鼠标的文字.rar跟随鼠标的文字.rar...
MFC中实现文字可以跟随鼠标任意移动的功能。
易语言窗口跟随焦点源码,窗口跟随焦点
国外网站翻译过来的一款左右全屏焦点图,支持惯性效果,左边是文字,右侧是图片,图片切换的同时背景也跟着切换,比较有创意
绘制的axure轮播图,使用动态面板进行绘制,所用到的都是使用最简单的方式进行的实现,优化了好几次,功能包含底部小圆点,支持点击切换至对应的页面,自动轮播与左右切换,帮助你快速实现轮播功能
漂亮的全屏背景图片跟随手风琴图片一起切换的jQuery图片手风琴切换特效。
很好的飘浮文字跟随鼠标很好的飘浮文字跟随鼠标很好的飘浮文字跟随鼠标
文字跟随鼠标的小实例,使用as3和flashDevelop开发工具
ViewPager点击或滑动时,指示器文字跟随变色,光标跟随
Silverlight 鼠标移动显示坐标 图片跟随
跟随鼠标的半透明图片.rar跟随鼠标的半透明图片.rar跟随鼠标的半透明图片.rar跟随鼠标的半透明图片.rar跟随鼠标的半透明图片.rar跟随鼠标的半透明图片.rar