码迷,mamicode.com
首页 > Web开发 > 详细

前端插件--swipe.js

时间:2018-01-15 22:41:48      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:过渡动画   键值   nbsp   flow   position   cti   play   list   可选参数   

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

标签:过渡动画   键值   nbsp   flow   position   cti   play   list   可选参数   

原文地址:https://www.cnblogs.com/mrszhou/p/8289646.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!