1 <body>
2 <div id="wrap">
3 <img src="img/0.png"/>
4 <img src="img/1.png"/>
5 <img src="img/2.png"/>
6 <img src="img/3.png"/>
7 <img src="img/4.png"/>
8 <img src="img/5.png"/>
9 <img src="img/6.png"/>
10 </div>
11
12 </body>
1 <style>
2 body{
3 margin: 0;
4 background-color: #999;
5 }
6 #wrap{
7 height: 500px;
8 background: url(img/bg.png) no-repeat center;
9 background-size: 1800px 500px;
10 position: relative;
11 transform-style: preserve-3d;
12 perspective: 800px;
13 margin-top: 100px;
14 }
15 img{
16 border: none;
17 vertical-align: top;
18 }
19 #wrap img{
20 width: 300px;
21 height: 200px;
22 position: absolute;
23 left: 50%;
24 top: 50%;
25 margin-left: -150px; /* 居中*/
26 margin-top: -100px;
27 transition: 0.7s ease-in-out;
28 }
29 </style>
<script type="text/javascript">
window.onload = function()
{
var imgs = document.getElementsByTagName("img");
var target = "";
var n = 6; //开始值
var onoff = true; //解决快速多点 乱跑问题
setTimeout(function(){
tab(n)
},200)
// 3 4 5 6 0 1 2
function tab(n)
{
for (var i = 0; i < 3; i++) {
var left = n-1-i;
if (left<0) { // 重要步骤一
left = left +7;
}
imgs[left].style.transform = "translateX("+(-150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(30deg)"; //往右边移动 150 景深 2边 离中心越远 越 小
var right = n+1+i;
if (right>6) {// 重要步骤一
right = right -7;
}
imgs[right].style.transform = "translateX("+(150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(-30deg)";
}
imgs[n].style.transform = "translateZ(300px)";
}
for (var i = 0; i < imgs.length; i++) {
imgs[i].index = i;
imgs[i].onclick = function()
{
if(!onoff){
return;
}
onoff = false;
target = this.index;
//alert(this.index)
//gonext();
//是否走下一张最近 还是上一张最近 当前值 》点击值 相减 》= 3
if(target > n) // 点击 6 当前 2
{
if(target-n <= 3)
{
gonext() //往上走
}else{
goprev(); //往下走
}
}else{// 点击 0 当前 6
if(n -target >=4){
gonext() //往上走
}else{
goprev(); //往下走
}
}
}
}
function gonext() //图片切换
{
n++ // +1
if(n>6){ //判断是否大于6 回归 0
n = 0;
}
tab(n); //顺序不能乱
if(n == target){ //点击值 == 已经到达的值则退出 运动完成
onoff = true;
return;
}
setTimeout(function(){
gonext();
},700)
}
function goprev() //图片切换
{
n-- // +1
if(n<0){ //判断是否大于6 回归 0
n =6;
}
tab(n); //顺序不能乱
if(n == target){ //点击值 == 已经到达的值则退出
onoff = true;
return;
}
setTimeout(function(){
goprev();
},700)
}
}
</script>
