一款基于jQuery的垂直缩略图轮播，效果非常酷炫。
淘建站为您提供更多_图片代码_图片轮播_轮播_缩略图，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 303 次
打赏作者
觉得不错，可打赏下作者
下载资源
免费共享
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
HTML
首先我们放置7张图片，初始化显示4张，后面3张用来轮播：
<div class="ms-showcase2-template ms-dir-v">
<div class="master-slider ms-skin-default" id="masterslider">
<div class="ms-slide">
<img src="masterslider/loading-2.gif" data-src="images/big/1.jpg" alt="lorem ipsum dolor sit" />
<img class="ms-thumb" src="images/1.jpg" alt="thumb" />
</div>
<div class="ms-slide">
<img src="masterslider/loading-2.gif" data-src="images/big/2.jpg" alt="lorem ipsum dolor sit" />
<img class="ms-thumb" src="images/2.jpg" alt="thumb" />
</div>
<div class="ms-slide">
<img src="masterslider/loading-2.gif" data-src="images/big/3.jpg" alt="lorem ipsum dolor sit" />
<img class="ms-thumb" src="images/3.jpg" alt="thumb" />
</div>
<div class="ms-slide">
<img src="masterslider/loading-2.gif" data-src="images/big/4.jpg" alt="lorem ipsum dolor sit" />
<img class="ms-thumb" src="images/4.jpg" alt="thumb" />
</div>
<div class="ms-slide">
<img src="masterslider/loading-2.gif" data-src="images/big/5.jpg" alt="lorem ipsum dolor sit" />
<img class="ms-thumb" src="images/5.jpg" alt="thumb" />
</div>
<div class="ms-slide">
<img src="masterslider/loading-2.gif" data-src="images/big/6.jpg" alt="lorem ipsum dolor sit" />
<img class="ms-thumb" src="images/6.jpg" alt="thumb" />
</div>
<div class="ms-slide">
<img src="masterslider/loading-2.gif" data-src="images/big/7.jpg" alt="lorem ipsum dolor sit" />
<img class="ms-thumb" src="images/7.jpg" alt="thumb" />
</div>
</div>
</div>jQuery
接着我们调用MasterSlider插件：
$(function() {
var slider = new MasterSlider();
slider.setup('masterslider', {
width: 610,
height: 630,
space: 5,
view: 'basic'
});
slider.control('arrows');
slider.control('scrollbar', {
dir: 'h'
});
slider.control('thumblist', {
autohide: false,
dir: 'v',
arrows: false
});
});
