轮播图

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>轮播图</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         body{
 12 
 13             background-color: #000;
 14         }
 15         .carousel{
 16             position: relative;
 17             height: 150px;
 18             margin: 200px auto;
 19             transform-style: preserve-3d; /* 转换3d 格式， 景深 视线的距离*/
 20 
 21             perspective: 800px;
 22 
 23         }
 24         .carousel img{
 25             position: absolute;
 26             /*left: 200px;*/
 27             /*transform: rotateY(45deg);*/
 28             width: 300px;
 29             height: 150px;
 30             -webkit-box-reflect: below 0 -webkit-linear-gradient(top, rgba(0, 0 ,0, 0.1), rgba(0, 0, 0, 0.5));
 31             /*阴影 透明度*/
 32             transition: 0.6s;
 33         }
 34         .carousel img.left{
 35             transform: rotateY(45deg) translateZ(-100px);
 36         }
 37          .carousel img.current{
 38             transform: translateZ(100px);
 39 
 40         }
 41          .carousel img.right{
 42             transform: rotateY(-45deg) translateZ(-100px);
 43         }
 44 
 45     </style>
 46 </head>
 47 <body>
 48 <div class="carousel">
 49     <img src="images/banner19.jpg"/>
 50     <img src="images/banner011.jpg" />
 51     <img src="images/banner-zhi10.jpg"/>
 52     <img src="images/banner-dayun.jpg"/>
 53     <img src="images/banner-AC313.jpg"/>
 54     <img src="images/banner033.jpg"/>
 55     <img src="images_ag600/AG660banner2.jpg"/>
 56 </div>
 57 
 58 
 59 <script>
 60     var imglist = document.querySelectorAll('.carousel img');//获取到了所有的图片
 61     var current = Math.floor(imglist.length/2);
 62     var carousel = document.querySelector('.carousel');
 63     var len = imglist.length;
 64     function init(num) {
 65         var w = window.innerWidth;
 66        
 67 //        for(var i=0; i<num; i++){
 68 //            imglist[i].style.left = w/2-150-(num-i)*100 +"px";
 69 //        }
 70 //
 71 //        imglist[num].style.left = w/2-150+"px";
 72 //        for(var i=num+1; i<imglist.length; i++){
 73 //            imglist[i].style.left = w/2-150-(numt-i)*100 +"px";
 74 //        }
 75          for(var i=0; i<len; i++){
 76             imglist[i].style.left = w/2-150-(num-i)*100 +"px";
 77             if(i<num){
 78                  imglist[i].className='left';
 79             }else if(i==num){
 80                 imglist[num].className='current';
 81             }else {
 82                 imglist[i].className='right';
 83             }
 84         }
 85 
 86 
 87 //        for(var i=num+1; i<imglist.length; i++){
 88 //             imglist[i].className='right';
 89 //        }
 90 //        imglist[num].className='current';
 91 //
 92 //        for(var i=0; i<num; i++){
 93 //             imglist[i].className='left';
 94 //        }
 95 
 96     }
 97     init(current);
 98 
 99 //    for(let i=0; i<len; i++){//let是局部变量
100 //        imglist[i].onclick = function () {
101 //            current = i;
102 //            init();
103 //        }
104 //    }
105 
106     carousel.addEventListener('click', function (e) {
107         imglist.forEach(function (item, i) {
108 
109             if(e.target == item){
110                 clearInterval(timer);
111                 timer=setInterval(next, 1500);
112                 current=i;
113                 init(current);
114 
115             }
116 
117 
118         })
119     },false ); //添加监听事件
120 
121     function next() {//定时器
122         current++;
123         if(current==len){
124             current=0;
125         }
126         init(current);
127 
128     }
129     var timer = setInterval(next, 1500);
130 
131 </script>
132 </body>
133 </html>