【转】jQuery支持移动端轮播图插件swipeslider.js

原文地址:http://www.jq22.com/jquery-info15352

使用方法

引用以下文件

<link rel="stylesheet" type="text/css" href="dist/swipeslider.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="dist/swipeslider.min.js"></script>

html

<figure id="full_feature" class="swipslider">
    <ul class="sw-slides">
        <li class="sw-slide">
            <img src="img/summer_beach.jpg" alt="Summer beach concept">
        </li>
        <li class="sw-slide">
            <img src="img/lang_yie_ar_kung_fu.jpg" alt="Lang from Yie Ar Kung Fu">
        </li>
        <li class="sw-slide">
            <img src="img/tiny_vacation.jpg" alt="Tiny Tina">
        </li>
        <li class="sw-slide">
            <img src="img/borderlands_tiny_tina.jpg" alt="Tiny Tina from Borderlands 2">
        </li>
        <li class="sw-slide">
            <img src="img/redhead.jpg" alt="Redhead girl">
        </li>
    </ul>
</figure>

js

<script type="text/javascript">
    $(window).load(function() {
         $('#full_feature').swipeslider();
    }
</script>

关闭自动轮播,左右箭头

$(dom).swipeslider({
    // autoPlay:true,
    prevNextButtons: false,   
});

 

 
posted @ 2019-10-30 16:41  花影疏帘  阅读(764)  评论(0)    收藏  举报