轮播carousel-仿淘宝

title: carousel
date: 2017-06-29 16:47:19
tags:

这就是一个移动端的轮播， 支持左滑和右滑。 用在PC端也是没问题的, 参考的淘宝的移动端页面。
最终操作的还是DOM， 为了提高效率建议开启GPU加速，外加使用css的tranfrom和transition来实现，下面的这种可以作为参考

用法：

1. 引入这个css和js是必须的。 这个轮播也依赖于jQuery， 但是没在jQuery的基础上扩展， 暂时先这么用一下。jQuery是3.0.0以后的

   <link rel="stylesheet" href="./dist/css/xdyuan_carousel.min.css">
   <script src="./node_modules/jquery/dist/jquery.js"></script>
   <script src="dist/js/xdyuan_carousel.min.js"></script>
   

2. HTML的结构需要注意下

   <div class="xdyuan_container">
       <ul class="">
           <li class="">
               <a target="" href="#"><img class="" src="../image/1.jpg" alt="0"></a>
           </li>
           <li class="xdyuan_li">
               <a target="" href="#"><img class="" src="../image/2.jpg" alt="1"></a>
           </li>
       </ul>
   </div>
   

   最外层的div的类名暂时先取成xdyuan_container，固定一下。里面必须第一层包含ul， li里面的一般的设计也是a和img。类名可以不要。

3. js的使用

    window.xdyuanCarouselInit({
           containerIdentify : '.xdyuan_container',
           effectiveDeltaX:80,
           invalidDeltaY: 80,
           interval : 5000, //毫秒
           contaner_height : 175,
           indexObj : {
               right : 0,
               bottom : 5,
               isCenter : false,
               currentBackgroundColor : 'orange',
               backgroundColor : '#ccc'
           }
       });
   

   几个参数这里注意一下

   参数	说明	类型
   containerIdentify	这是最外层div. 格式.class或#id	string
   effectiveDeltaX	左右滑触发图片滑动的距离。设计为80差不多	number
   invalidDeltaY	滑动时垂直的距离超过这个数就放弃， 考虑到可能需要下拉刷新等。	number
   interval	轮播的时间间隔， 单位毫秒	number
   contaner_height	你希望的轮播的高度， 可以自己根据图片的比例计算	number
   indexObj	这是一个索引，轮播的指示，是一个个的圆点。通过这个对象设置索引的一些类型。不设置这个属性就是没有索引， 设置了里面的属性就得完成	object
   right ， bottom	这是定位的值， 目前支持这两个值， left和top没做进去， 因为太懒了。	number
   isCenter	是不是居中， 如果是的话设置一些bottom就行， 不需要设置right	boolean
   currentBackgroundColor	高亮的小圆点背景色	color
   backgroundColor	其他的背景色	color

   color : javascript认可的所有的颜色格式。

   资源地址：

   https://github.com/XuedaoYuan/carousel.git

   下载方式

   git clone https://github.com/XuedaoYuan/carousel.git
   

   也可以初始化npm用

   npm install xdyuan_carousel --save
   

   ​

   ​

   ​