这是一款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代码请参考下载文件。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!