jq实现轮播图(景深效果)——功能实现

青旅半醒 2023-01-23 09:52 62阅读 0赞

最近工作不是很忙，正好可以多多练习一下`jq`，毕竟这块我实在是基础薄弱，在工作中经常会遇到各种各样的问题，导致效率很低。

今天的案例是一个自动轮播图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
上面的轮播图跟以往的轮播有点区别，常见的轮播图是只展示一张图片，其他图片是隐藏的。常见轮播图的实现方式是所有图片一行排列，依次改变图片的`margin-left`值，如果要实现无缝轮播，则需要复制一份第一张放在图片集合的最后。

此处要实现的效果，图片有前有后，则需要用到景深。

## 注意：添加景深效果时需要给父级添加 ##

然后给每张图片设置`position:absolute`,父级添加`position:relative`,此时所有的图片会重叠展示。然后根据图片集合的`for`循环，给每张图片添加`transform:translateX()`横向偏移距离，保证图片出现左右方向的错位。

`html部分`  
这个部分是最简单的：

`css部分`  
先分析一下样式：

1.  父级元素添加景深效果，且为`flex`横向布局
2.  子级图片部分`position:absolute`，相对于父级绝对定位，并添加`transition`动画

* { 
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0;
    }
    
    .wrapper { 
        position: relative;
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        margin: 100px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-style: preserve-3d;
        perspective: 800px;
    }
    
    .wrapper .img-box { 
        width: 500px;
        height: 300px;
    }
    
    .wrapper .img-box img { 
        position: absolute;
        width: 500px;
        height: 300px;
        box-shadow: 0 8px 30px #ddd;
        transition: transform 0.5s ease-in-out;
    }
    
    .wrapper .list { 
        position: absolute;
        width: 100%;
        height: 50px;
        bottom: -70px;
        left: 0;
        text-align: center;
    }
    
    .wrapper .list ul { 
        display: inline-block;
    }
    
    .wrapper .list ul li { 
        width: 15px;
        height: 15px;
        background-color: #ccc;
        border-radius: 50%;
        display: inline-block;
        margin-left: 10px;
        cursor: pointer;
    }
    
    .wrapper .list ul li.active { 
        background-color: red;
    }

`js`部分：这个是最最重要的，其实这个代码里面的根据索引求取位置的部分，我还没有想明白。将这个案例的老师都是一带而过，我不知道为什么要这么写，感觉有点懵……

分析一下`js`部分的代码：

1.  `jq`很容易获取到`img`的图片集合`dom`
2.  将索引为`0`的图片默认为中间的一张图片，通过`中间索引-i-1`获取左侧的图片索引，通过`中间索引+i+1`获取右侧的图片索引，针对左侧的图片，`transform:translateX(负数)`,针对右侧的图片，`transform:translateX(正数)`.具体移动的距离跟索引也是有关系的。
3.  案例中为了更直观的理解，将`中间索引`默认为`0`,左侧的索引默认为`-2,-1`也就是`3,4`,右侧的索引默认为`1,2`

具体代码如下：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221004/ca5e9ac0052c4da9871f55099d4358ce.png