这是一款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代码请参考下载文件。