<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
position: relative;
width: 100%;
height:500px;
transform-style: preserve-3d;
perspective:800px;
}
li{
width: 300px;
height: 200px;
position: absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-100px;
list-style: none;
border-radius: 5px;
transition: 1s;
overflow: hidden;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<ul class="box">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/6.jpg" alt=""></li>
<li><img src="img/7.jpg" alt=""></li>
</ul>
<script>
var li=document.getElementsByTagName("li");
var iNow=3;
var iTaget = 0;
fn(iNow);
function fn(n){
for (let i = 1; i < 4; i++) {
var left=n-i;
if (left<0) {
left=left+7;
}
li[left].style.transform=`translateX(${-150*(i)}px) translateZ(${300-i*100}px) rotateY(30deg)`
var right=n+i;
if (right>6) {
right=right-7
}
li[right].style.transform=`translateX(${150*(i)}px) translateZ(${300-i*100}px) rotateY(-30deg)`
}
li[n].style.transform="translateZ(300px)"
}
var middle=0;
for (var i = 0; i < li.length; i++) {
li[i].index=i;
li[i].onclick=function(ev){
middle=document.documentElement.clientWidth/2;
num=ev.clientX;
iTaget=this.index;
if (middle<=num) {
goleft()
}else{
goright()
}
}
}
function goleft(){
if (iNow==iTaget) {
return
}
iNow++;
if (iNow>6) {
iNow=0;
}
fn(iNow);
setTimeout(function(){
goleft()
},700)
}
function goright(){
if (iNow==iTaget) {
return
}
iNow--;
if (iNow<0) {
iNow=6;
}
fn(iNow);
setTimeout(function(){
goright()
},700)
}
</script>
</body>
</html>
相关文章：