基于jquery垂直缩略图切换相册

转载 (原文地址) 拎壶充 随笔 待整理 911阅读 2015-02-28 14:03:38 举报

[color=rgb(0, 0, 0)][backcolor=rgb(254, 254, 242)]今天给大家分享一款垂直缩略图切换jQuery相册,这是一款垂直缩略图左右滚动切换响应式jQuery图片相册代码。该 插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:[/bgcolor][/color][color=rgb(0, 0, 0)][backcolor=rgb(254, 254, 242)]

基于jquery垂直缩略图切换相册[/bgcolor][/color][color=rgb(0, 0, 0)][backcolor=rgb(254, 254, 242)]####在线预览 源码下载[/bgcolor][/color][color=rgb(0, 0, 0)][backcolor=rgb(254, 254, 242)]实现的代码。[/bgcolor][/color][color=rgb(0, 0, 0)][backcolor=rgb(254, 254, 242)]html代码:[code]<div style="max-width: 800px; margin: 50px auto;">
<div class="ms-showcase2-template ms-dir-v">
<!-- masterslider -->
<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>
<!-- end of masterslider -->
</div>
</div>[/code]js代码:[code]$(document).ready(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 });
});[/code]via:http://www.w2bc.com/Article/24052[/bgcolor][/color]

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复