欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-23 08:50:36
一、Html代码如下: 二、Css代码如下: 三、jQuery代码如下: 四、引用swipe.js 五、swipe.js代码下载地址: https://codeload.github.com/thebird/Swipe/zip/2.0.0,下载后解压即可看到。 六、效果图实例如下: ......

一、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实现支持手拔与自动切换的图片轮播