已经分享过两篇关于Slippr轮播插件的文章：
本文再次分享下带缩略图的Slippry轮播插件特效代码：
查看演示：
https://www.yzktw.com.cn/demo/Slippry2/
下载源码：
结构分享：
<!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>