这是一款jQuery和css3带缩略图的响应式弹性轮播图插件。该插件图片轮播时带弹性缓冲效果，并且该插件使响应式的，为了做到这一点，插件中使用了css和javascript混合的技术。
HTML
html结构使用两个无序列表，一个用来放置轮播图，一个用来放置缩略图。轮播图无序列表中的每个子项包括一个h2标题、一个h3标题和一张图片：
<div id="ei-slider" class="ei-slider"> <ul class="ei-slider-large"> <li> <img src="images/large/1.jpg" alt="image01" /> <div class="ei-title"> <h2>Creative</h2> <h3>Geek</h3> </div> </li> <li>...</li> </ul> <ul class="ei-slider-thumbs"> <li class="ei-slider-element">Current</li> <li> <a href="#">Slide 1</a> <img src="images/thumbs/1.jpg" alt="thumb01" /> </li> <li>...</li> </ul></div> |
JAVASCRIPT：
可用参数：
$.Slideshow.defaults = { // animation types: // "sides" : new slides will slide in from left / right // "center": new slides will appear in the center animation : 'sides', // sides || center // if true the slider will automatically // slide, and it will only stop if the user // clicks on a thumb autoplay : false, // interval for the slideshow slideshow_interval : 3000, // speed for the sliding animation speed : 800, // easing for the sliding animation easing : '', // percentage of speed for the titles animation. // Speed will be speed * titlesFactor titlesFactor : 0.60, // titles animation speed titlespeed : 800, // titles animation easing titleeasing : '', // maximum width for the thumbs in pixels thumbMaxWidth : 150}; |
CSS代码和详细的javascript代码请参考下载文件。
