前言

大佬们轻喷。（第一次发帖，才发现写文章并没有想象中的简单）前几天在工作中需要完成一个轮播图，大致如图，由于之前比较懒，很多时候都是直接去swipe官网上去下载插件直接拿来用的，总想着完成之后自己有空再去深入探究具体的实现，最后都是不了了之，刚好PC项目中遇到，就想着自己能不能手写一个好看点的轮播图。平常遇到的轮播图普遍是向右动画过渡的，这次根据UI图想着有没有更好的方式去美化这个轮播呢？在经过半天的时间后，发觉自己的构思实现方式似乎还可以。于是想分享出来给大家。源码链接

思路

以一个对应item数量的数组去存储每个item的位置，通过修改类名(item_0-item_3)的方式让item展示在对应数组元素的位置。以当前图片为例，具体有四个状态，分别为

1.data-tab="0" 对应 [0,1,2,3]及[item_0,item_1,item_2,item_3]
2.data-tab="1" 对应 [3,0,1,2]及[item_3,item_0,item_1,item_2]
3.data-tab="2" 对应 [2,3,0,1]及[item_2,item_3,item_0,item_1]
4.data-tab="3" 对应 [1,2,3,0]及[item_1,item_2,item_3,item_0]
注：后面的item_0 ... 对应的是图片容器排列的类名。

    .item_0 {
      z-index: 999;
      left: -50px;
      transform: translateY(-50%) scale(1);
    }
    .item_1 {
      z-index: 998;
      left: 0;
      transform: translateY(-50%) scale(0.9);
      opacity: 0.3;
    }
    .item_2 {
      z-index: 997;
      left: 50px;
      transform: translateY(-50%) scale(0.8);
      opacity: 0.2;
    }
    .item_3 {
      z-index: 996;
      left: 50px;
      transform: translateY(-50%) scale(0.8);
      opacity: 0.2;
    }

最后，搞明白数组的顺序变换就可以完成切换。以tab2与tab0相互切换为例，其它的tab切换与此一致。
统一起来代码如下，tab为要切换到tab的 data-tab, item 为当前所处tab的 data-tab

   let key = tab - item
   indexArr = indexArr.map(value => {
       value = key > 0 ? 
           (value - key >= 0 ? value - key : value - key + len)
         : (value - key >= len ? value - key - len : value - key)
       return value
    })

在切换完数组的顺序以后，根据数组顺序更改每个item的class即可完成切换。这里我为了准确获取每个item当前的位置而设定了自定以属性data-index以获取位置信息。

    $left.children('.item').each((index, item) => {
       $(item).attr('data-index', indexArr[index])
        .removeAttr('style')
        .removeClass().addClass('item absolute item_'+ indexArr[index])
      })

优化

上面的代码是可以实现了tab切换。在item上加上 transitioncss属性后就可以稍微平滑的过渡切换了。当然，除了直接切换外，为了使得过渡更加顺滑，在对数组进行切换之前，可以获取要切换到的tab的data-index的值，借此来获知需要对前面多少个item添加左移过渡。如：data-index="3"，（data-index是当前位置的标识，data-index为3,前面还有data-index=2,1,0的存在）则其前面有三个item。此时需要对前面三个item都添加左移left。

最后

非常感谢大家花费宝贵的时间来阅读。首次写文章，有很多生涩的地方，写的有点乱，图片也暂时没法弄gif的形式让大家有直观的感觉。感兴趣的小伙伴可以看下源码,您的一次阅读就是我满满的收获。如有不明白的地方，可以评论区发一下。再次感谢大家的阅读！

以Tab栏的方式切换轮播

前言

思路

优化

最后