zoukankan      html  css  js  c++  java
  • 基于jquery垂直缩略图切换相册

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

    在线预览   源码下载

    实现的代码。

    html代码:

    <div style="max- 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', {
                     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

  • 相关阅读:
    Syntactic_sugar
    processor, memory, I/O
    he time that it takes to bring a block from disk into main memory
    How MySQL Uses Indexes CREATE INDEX SELECT COUNT(*)
    mysqli_multi_query($link, $wsql)
    UTC ISO 8601
    but this usually doesn’t gain you anything.
    SET GLOBAL slow_query_log=1
    SET GLOBAL long_query_time=0
    a read only variable
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4305278.html
Copyright © 2011-2022 走看看