前端插件--swipe.js
阿新 • • 發佈：2018-01-16
輕量級 har callback -s rap 鍵值對 過渡 end play
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