图片左右切换效果

刚学到js，就想着用js做一点特效，看到element-ui里面的这个图片切换特效就非常有意思，然后自己就尝试着做了一下；

 

*{
    margin: 0;padding: 0;list-style: none;
}
.box{
    width: 900px;height: 360px;
}
.box ul{
    width: 900px;height: 360px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: center;
    position: relative;
}
.box ul li{
    position: relative;
    transition: all 0.8s ease;
}
.box ul li img{
    position: relative;//添加定位利用zIndex让图片显示在最上面
    border: 1px solid skyblue;
    width: 300px;
}

先给图片定义样式（因为自己喜欢玩阴阳师，所以就去阴阳师官网找的图片），再定义div盒子的框架

<div class="box">
    <ul>
        <li><img src="image/ssr不知火.png" alt="" style="background-color:yellow;"></li>
        <li><img src="image/ssr彼岸花.png" alt="" style="background-color:blue;"></li>
        <li><img src="image/ssr缘结神.png" alt="" style="background-color:pink;"></li>
    </ul>
</div>

接下来就是js部分

首先获取元素内容：

let box = document.querySelector('.box');
let ul = document.querySelector('ul');
let lis = document.querySelectorAll('li');
for (let i = 0; i < 3; i++) {//利用循环给所有小li添加点击事件
    lis[i].setAttribute('index',i.toString());//给小li添加下标index
    lis[1].style.transform = 'scale(1.2)';//将中间图片放大
    lis[1].style.zIndex = '999';//利用zIndex将中间的图片显示在最上层
    lis[i].addEventListener('click',function (){
        for (let j = 0; j < lis.length; j++) {
            lis[j].style.zIndex = '0';
        }//将所有小li的zIndex设置为0
        this.style.zIndex = '999';//点击之后让当前的小li显示在最上层
        let index = this.getAttribute('index');//获取li的下标
        //判断点击的是哪个小li，分别设置样式，这里我没想出来是不是有更好的方法。。。
        if (index==='2'){
            this.style.transform = 'scale(1.2)  translateX(-250px)';
            lis[1].style.transform = 'scale(1) translateX(-300px)';
            lis[0].style.transform = 'translateX(600px)'
        }else if(index==='0'){
            this.style.transform = 'scale(1.2)  translateX(250px)';
            lis[1].style.transform = 'scale(1) translateX(300px)';
            lis[2].style.transform = 'translateX(-600px)'
        }else if(index==='1'){
            this.style.transform = 'scale(1.2)  translateX(0)';
            lis[0].style.transform = 'scale(1)  translateX(0)';
            lis[2].style.transform = 'scale(1)  translateX(0)'
        }
    })
}