展示图轮播

 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>

展示图 轮播

展示图轮播