jQuery带缩略图的响应式弹性轮播图插件

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