jQuery垂直缩略图轮播展示

来源:https://www.sucaihuo.com/js/104.html 2015-05-04 08:48浏览(2504) 收藏

一款基于jQuery的垂直缩略图轮播,效果非常酷炫。
jQuery垂直缩略图轮播展示
分类:图片代码 > 图片轮播 难易:高级
查看演示 下载资源 下载积分: 20 积分

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
    });
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2