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>
