码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-02-28 14:17:00      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享

在线预览   源码下载

实现的代码。

html代码:

<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>

js代码:

 $(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 });
        });

via:http://www.w2bc.com/Article/24052

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

标签:

原文地址:http://www.cnblogs.com/liaohuolin/p/4305278.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!