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

Posted 梦想是什么

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swipe.js实现支持手拔与自动切换的图片轮播相关的知识,希望对你有一定的参考价值。

一、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,下载后解压即可看到。

六、效果图实例如下:

 

以上是关于swipe.js实现支持手拔与自动切换的图片轮播的主要内容,如果未能解决你的问题,请参考以下文章

swipe和swiper的区别

jQuey实现轮播图效果

原生js实现轮播图

Flexslider插件实现图片轮播文字图片相结合滑动切换效果

轮播图(淡入淡出切换)

JS网页设计里面,轮播图片,未设置初始值,想进入该网页后,自动默认选定第一个切换如何增加函数。