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

老白 1周前 15浏览 0评论

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

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

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


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

查看演示:

http://www.ylefu.com/demo/Slippry2/

下载源码:

Slippry2.zip


jQuery幻灯片轮播插件Slippry(带缩略图) 等比例响应式.png jQuery幻灯片轮播插件Slippry(带缩略图) 等比例响应式 js/jQuery

结构分享:

<!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>

 

评论