项目目录结构：
HTML代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link type="text/css" rel="styleSheet" href="css/wrap.css" /></head><body οnlοad="setInterval('go()',5000)"><audio autoplay="autoplay" loop="loop" hidden="hidden" ><source src="media/最美的期待.mp3" type="audio/mpeg" /></audio><div class="wrap"><img src="img/1.jpg" /><img src="img/2.jpg" /><img src="img/3.jpg" /><img src="img/4.jpg" /><img src="img/5.jpg" /><img src="img/6.jpg" /><img src="img/7.jpg" /></div><script>var oimg = document.getElementsByTagName('img')var iNow = 0;var iTarget = 0;//给七张图片排位置 07 06 01 02 03 04 05tab(0)function tab(n){for(var i = 0; i < 3; i++){var left = n-1-iif(left<0){left = left+7;}oimg[left].style.transform = `translateX(${-150*(i+1)}px) translateZ(${200-i*100}px) rotateY(30deg)`var right = n+1+iif(right>6){right = right-7;}oimg[right].style.transform = `translateX(${150*(i+1)}px) translateZ(${200-i*100}px) rotateY(-30deg)`}oimg[n].style.transform = `translateZ(${250}px)`}var middle = 0;var num = 0;//给每张图片添加点击事件for(var i = 0; i < oimg.length; i++){oimg[i].index = i;oimg[i].onclick = function(ev){//中线的位置middle = document.documentElement.clientWidth/2;//获取鼠标到达屏幕左边的水平距离num = ev.clientX;iTarget = this.index;if(middle<num) //鼠标在右边{goNext()}else{goPrev()}}}function go(){iTarget = parseInt(10*Math.random())goNext()}function goNext(){if(iTarget == iNow){return; }iNow++if(iNow>6){iNow = 0;}tab(iNow)//设置延时 递归调用setTimeout(function(){goNext()},800)}function goPrev(){if(iTarget == iNow){return; }iNow--console.log(iNow)if(iNow<0){iNow = 6;}tab(iNow)//设置延时 递归调用setTimeout(function(){goPrev()},800)} </script></body>
</html>css样式代码：
html,body{ height: 100%; width: 100%;margin: 0;}
.wrap{height: 100%;width: 100%;margin:0 ; padding: 0;background: url(../img/snow.png) no-repeat;background-size: 100%;background-attachment: fixed;position: relative;/*** 定义一个3d空间*/transform-style: preserve-3d;perspective: 800px;
}
.wrap img{width: 200px;height: 320px;position: absolute;left: 50%;top: 50%;margin-left: -130px;margin-top: -150px;transition: 1s;
}
