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>