index==2&&(index=-1) 逻辑短路 &&代表index==2为真才会执行index=-1
setAttribute() 方法为一个或一组元素添加指定的属性，并且为其赋指定的值。（主要针对自定义属性）
如果这个属性已经存在，仅仅设置或是修改属性值。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d动画</title>
<style>
.wrapper{
margin: 60px;
position: relative;
height: 200px;
background-color: rgba(0,0,0,.4);
}
.box{
border: 1px red solid;
position: absolute;
width: 120px;
height: 160px;
top: 50%;
left:50%;
transition-duration: .3s;
}
.box1{
background-color: burlywood;
}
.box2{
background-color: cornsilk;
}
.box3{
background-color: darkred;
}
[data-index="0"]{
transform: scale(1) translate(-50%,-50%);
z-index: 1;
}
[data-index="1"]{
transform: scale(.8) translate(-160%,-60%);
}
[data-index="2"]{
transform: scale(.8) translate(30%,-60%);
}
img{
width: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1 box" data-index="0"><img src="../images/3d0.png" alt=""></div>
<div class="box2 box" data-index="1"><img src="../images/3d1.png" alt=""></div>
<div class="box3 box" data-index="2"><img src="../images//3d2.png" alt=""></div>
<button id="btn1">上一个</button>
<button id="btn2">下一个</button>
</div>
<script>
let boxEle = document.querySelectorAll('.box')
let wap=document.querySelector('.wrapper')
function roll(){
setTimeout(function run(){
boxEle.forEach(item=>{
let index = item.dataset['index']
index==2&&(index=-1)
item.setAttribute('data-index',+index+1)
})
times= setTimeout(run,3000)
},3000)
}
// roll()
const btn1=document.querySelector('#btn1')
btn1.onclick=()=>{
boxEle.forEach(item=>{
let index = item.dataset['index']
index==2&&(index=-1)
item.setAttribute('data-index',+index+1)
console.log(item);
})
}
const btn2=document.querySelector('#btn2')
btn2.onclick=()=>{
boxEle.forEach(item=>{
let index = item.dataset['index']
index==0&&(index=3)
item.setAttribute('data-index',+index-1)
console.log(item);
})
}
</script>
</body>
</html>
