jQuery幻灯片轮播插件Slippry（带缩略图） 等比例响应式

已经分享过两篇关于Slippr轮播插件的文章：

1、幻灯片轮播插件Slippry 使用方法 配置参数

2、jQuery幻灯片轮播插件Slippry 等比例响应式

本文再次分享下带缩略图的Slippry轮播插件特效代码：

查看演示：

https://www.yzktw.com.cn/demo/Slippry2/

下载源码：

Slippry2.zip

结构分享：

!doctype html>
    html>
    head>
    meta charset="UTF-8">
    meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>
    基于jQuery幻灯片插件Slippry - 爱编程w2bc.com/title>
    link rel="stylesheet" type="text/css" href="default.css">
    link rel="stylesheet" href="slippry.css">
    style type="text/css">
* {
     padding: 0;
     margin: 0;
}
ul {
     list-style: none;
}
.thumb-box {
     padding: 1.4em 0 1em;
     margin-left: -1%;
     width: 102%;
}
.thumb-box .thumbs {
     overflow: hidden;
     *zoom: 1;
}
.thumb-box .thumbs li {
     float: left;
     width: 25%;
     text-align: center;
     padding: 0 1%;
}
.thumb-box .thumbs li img {
     width: 100%;
     opacity: .8;
     -moz-transition: opacity 0.32s;
     -o-transition: opacity 0.32s;
     -webkit-transition: opacity 0.32s;
     transition: opacity 0.32s;
     border-bottom: 4px solid transparent;
}
.thumb-box .thumbs li img.active {
     border-color: #31ACE2;
     opacity: 1;
}
.thumb-box .thumbs li:hover img {
     opacity: 1;
     -moz-transition: opacity 0.2s;
     -o-transition: opacity 0.2s;
     -webkit-transition: opacity 0.2s;
     transition: opacity 0.2s;
}
    /style>
    /head>
    body>
    div>
        ul id="thumbnails">
            li>
     a href="#slide1">
     img src="image-1.jpg" alt="This is caption 1 >
    a href='#link'>
    Even with links!/a>
    ">
     /a>
     /li>
            li>
     a href="#slide2">
     img src="image-2.jpg" alt="This is caption 2">
     /a>
     /li>
            li>
     a href="#slide3">
     img src="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="image-4.jpg" alt="And this is some very long caption for slide 4.">
     /a>
     /li>
        /ul>
        div>
            ul>
                li>
    a href="#1" data-slide="1">
    img src="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="image-2.jpg" alt="This is caption 2">
    /a>
    /li>
                li>
    a href="#3" data-slide="3">
    img src="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="image-4.jpg" alt="And this is some very long caption for slide 4.">
    /a>
    /li>
            /ul>
        /div>
    /div>
    script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    /script>
    script src="slippry.min.js">
    /script>
    script>
        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;
        }
    );
    /script>
    /body>
    /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！