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,下载后解压即可看到。
六、效果图实例如下:
上一篇: 30分钟彻底弄懂flex布局
下一篇: Vue给元素添加样式