swipe.js的作用:
这是一个轻量级的移动滑动组件，支持触摸移动，支持响应式页面.
效果图：
代码：
?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>Title</title> ?6 ????<style> ?7 ????????*{ ?8 ????????????padding: 0; ?9 ????????????margin: 0; 10 ????????} 11 ????????.swipe { 12 ????????????overflow: hidden; 13 ????????????position: relative; 14 ????????????width: 800px; 15 ????????} 16 ????????.swipe-wrap { 17 ????????????overflow: hidden; 18 ????????????position: relative; 19 ????????????list-style: none; 20 ????????} 21 ????????.swipe-wrap > li { 22 ????????????float:left; 23 ????????????width:100%; 24 ????????????position: relative; 25 ????????} 26 ????????.swipe-wrap > li > a{ 27 ????????????width: 100%; 28 ????????????display: block; 29 ????????} 30 ????????.swipe-wrap > li > a > img{ 31 ????????????width: 100%; 32 ????????????display: block; 33 ????????} 34 ????</style> 35 ????<script src="./js/swipe.js"></script> 36 </head> 37 <body> 38 <!--swipe需要的是下面这样的结构，而不是下面这样的标签，意味着标签名称可以随意--> 39 <div id=‘slider‘ class=‘swipe‘> 40 ????<ul class=‘swipe-wrap‘> 41 ????????<li> 42 ????????????<a href="javascript:;" class="wrap"> 43 ????????????????<img src="./images/l1.jpg" > 44 ????????????</a> 45 ????????</li> 46 ????????<li> 47 ????????????<a href="javascript:;" class="wrap"> 48 ????????????????<img src="./images/l2.jpg" > 49 ????????????</a> 50 ????????</li> 51 ????????<li> 52 ????????????<a href="javascript:;" class="wrap"> 53 ????????????????<img src="./images/l3.jpg" > 54 ????????????</a> 55 ????????</li> 56 ????????<li> 57 ????????????<a href="javascript:;" class="wrap"> 58 ????????????????<img src="./images/l4.jpg" > 59 ????????????</a> 60 ????????</li> 61 ????????<li> 62 ????????????<a href="javascript:;" class="wrap"> 63 ????????????????<img src="./images/l5.jpg" > 64 ????????????</a> 65 ????????</li> 66 ????????<li> 67 ????????????<a href="javascript:;" class="wrap"> 68 ????????????????<img src="./images/l6.jpg" > 69 ????????????</a> 70 ????????</li> 71 ????????<li> 72 ????????????<a href="javascript:;" class="wrap"> 73 ????????????????<img src="./images/l7.jpg" > 74 ????????????</a> 75 ????????</li> 76 ????????<li> 77 ????????????<a href="javascript:;" class="wrap"> 78 ????????????????<img src="./images/l8.jpg" > 79 ????????????</a> 80 ????????</li> 81 ????</ul> 82 </div> 83 <script> 84 ????/* 85 ????Swipe可以扩展可选参数-通过设置对象的键值对: 86 ????????startSlide Integer (默认:0) - Swipe开始的索引 87 ????????speed Integer (默认:300) - 前进和后台的速度，单位毫秒. 88 ????????auto Integer - 自动滑动 (time in milliseconds between slides) 89 ????????continuous Boolean (默认:true) -是否可以循环播放（注：我设置为false好像也是循环的） 90 ????????disableScroll Boolean (默认:false) - 停止触摸滑动 91 ????????stopPropagation Boolean (默认:false) -停止事件传播 92 ????????callback Function - 回调函数，可以获取到滑动中图片的索引. 93 ????????transitionEnd Function - 滑动的过渡动画过后会执行的函数 94 ????* */ 95 ????window.mySwipe = new Swipe(document.getElementById(‘slider‘), { 96 ????????startSlide: 0, 97 ????????speed: 400, 98 ????????auto: 3000, 99 ????????continuous: true,100 ????????disableScroll: false,101 ????????stopPropagation: false,102 ????????callback: function(index, elem) {103 ????????????console.log(index);104 ????????????console.log(elem);105 ????????},106 ????????transitionEnd: function(index, elem) {}107 ????});108 </script>109 </body>110 </html>前端插件--swipe.js
原文地址：https://www.cnblogs.com/mrszhou/p/8289646.html