swipe.js实现支持手拔与自动切换的图片轮播

Posted 2021-02-03 梦想是什么

一、html代码如下：

<div id=\'mySwipe\' style=\'max-width:500px;margin:0 auto\' class=\'swipe\'>
  <div class=\'swipe-wrap\'>
    <li style="no-repeat center center; list-style-type: none;"><img src="/1.jpg" /></li>
    <li style="no-repeat center center; list-style-type: none;"><img src="/2.jpg" /></li>
    <li style="no-repeat center center; list-style-type: none;"><img src="/3.jpg" /></li>
  </div>
  <ul class="dot">
        <li class="cur"></li>
        <li></li>       
    <li></li>                         
  </ul>
</div>

二、Css代码如下：

#mySwipe{ overflow:hidden; visibility:hidden; position:relative;  }
.swipe-wrap{ overflow:hidden; position:relative;  }
.swipe-wrap > li{ float:left; width:100%; position:relative; }
.swipe-wrap img{ width:100%;  }
.dot{ list-style:none; position:absolute; bottom:10px; right:25px; width:200px; height:40px;  }
.dot li{  width:10px; height:10px; background:#9e9e9e; float:left; margin-right:10px; border-radius:10px;  }
.dot li.cur{  background:#ff5a54;  }

三、jQuery代码如下：

<script>
    var elem = document.getElementById("mySwipe");
    window.mySwipe = Swipe(elem, {
        //1s一次轮播
        auto: 2000,
        continuous: true,
        loop: true,
        autoplayDisableOnInteraction : false,
        callback: function(index, element) {
            $(".dot li").eq(index).addClass("cur").siblings().removeClass("cur");
        }
    });

    $(".dot li").click(
        function()
        {
            mySwipe.slide($(this).index());
        }

    );

</script>

四、引用swipe.js

<script type="text/javascript" src="js/swipe.js" ></script>

五、swipe.js代码下载地址：

https://codeload.github.com/thebird/Swipe/zip/2.0.0，下载后解压即可看到。

六、效果图实例如下：