位置：广州松河 > 技术支持 > jQuery幻灯片轮播插件Slippry（带缩略图）等比例响应式_js/jQuery

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

来源：网络整理时间：2023/3/4 1:04:59 共 3632 浏览

已经分享过两篇关于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>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：background-position 图标背景图片定位用法详细介绍_CSS学习 | ·下一条：jQuery幻灯片轮播插件Slippry 等比例响应式_js/jQuery

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

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