分享一款基于jQuery幻灯片插件Slippry是一款基于Slippry.js插件实现的图片切换特效代码。效果图如下 ：

在线预览    源码下载

实现的代码。

html代码：

 <div class="htmleaf-content">
        <ul id="thumbnails">
            <li>
                <a href="#slide1">
                    <img src="img/image-1.jpg" alt="This is caption 1 ><a href='#link'>Even with links!</a>">
                </a>
            </li>
            <li>
                <a href="#slide2">
                    <img src="img/image-2.jpg" alt="This is caption 2">
                </a>
            </li>
            <li>
                <a href="#slide3">
                    <img src="img/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long.">
                </a>
            </li>
            <li>
                <a href="#slide4">
                    <img src="img/image-4.jpg" alt="And this is some very long caption for slide 4.">
                </a>
            </li>
        </ul>
        <div class="thumb-box">
            <ul class="thumbs">
                <li><a href="#1" data-slide="1"><img src="img/image-1.jpg" alt="This is caption 1 ><a href='#link'>Even with links!</a>"></a></li>
                <li><a href="#2" data-slide="2"><img src="img/image-2.jpg" alt="This is caption 2"></a></li>
                <li><a href="#3" data-slide="3"><img src="img/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long."></a></li>
                <li><a href="#4" data-slide="4"><img src="img/image-4.jpg" alt="And this is some very long caption for slide 4."></a></li>
            </ul>
        </div>
    </div>

js代码：

  var thumbs = jQuery('#thumbnails').slippry({
            // general elements & wrapper
            slippryWrapper: '<div class="slippry_box thumbnails" />',
            // options
            transition: 'horizontal',
            pager: false,
            auto: false,
            onSlideBefore: function (el, index_old, index_new) {
                jQuery('.thumbs a img').removeClass('active');
                jQuery('img', jQuery('.thumbs a')[index_new]).addClass('active');
            }
        });

        jQuery('.thumbs a').click(function () {
            thumbs.goToSlide($(this).data('slide'));
            return false;
        });

via：http://www.w2bc.com/article/89600

在线预览    源码下载