前端插件--swipe.js

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              800px;
 15         }
 16         .swipe-wrap {
 17             overflow: hidden;
 18             position: relative;
 19             list-style: none;
 20         }
 21         .swipe-wrap > li {
 22             float:left;
 23             100%;
 24             position: relative;
 25         }
 26         .swipe-wrap > li > a{
 27              100%;
 28             display: block;
 29         }
 30         .swipe-wrap > li > a > img{
 31              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" alt="">
 44             </a>
 45         </li>
 46         <li>
 47             <a href="javascript:;" class="wrap">
 48                 <img src="./images/l2.jpg" alt="">
 49             </a>
 50         </li>
 51         <li>
 52             <a href="javascript:;" class="wrap">
 53                 <img src="./images/l3.jpg" alt="">
 54             </a>
 55         </li>
 56         <li>
 57             <a href="javascript:;" class="wrap">
 58                 <img src="./images/l4.jpg" alt="">
 59             </a>
 60         </li>
 61         <li>
 62             <a href="javascript:;" class="wrap">
 63                 <img src="./images/l5.jpg" alt="">
 64             </a>
 65         </li>
 66         <li>
 67             <a href="javascript:;" class="wrap">
 68                 <img src="./images/l6.jpg" alt="">
 69             </a>
 70         </li>
 71         <li>
 72             <a href="javascript:;" class="wrap">
 73                 <img src="./images/l7.jpg" alt="">
 74             </a>
 75         </li>
 76         <li>
 77             <a href="javascript:;" class="wrap">
 78                 <img src="./images/l8.jpg" alt="">
 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>