1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style> 7 #container{ 8 width: 450px; 9 height: 270px; 10 margin: 0 auto; 11 margin-top: 100px; 12 position: relative; 13 overflow: hidden; 14 } 15 16 #pic{ 17 width: 3150px; 18 height: 270px; 19 position: absolute; 20 z-index: 1; 21 } 22 /*图片大小*/ 23 #pic img{ 24 float: left; 25 width: 450px; 26 height: 270px; 27 } 28 29 #pre{ 30 width: 37px; 31 height: 63px; 32 background: url(../img/L1.png); 33 position: absolute; 34 top: 120px; 35 left: 5px; 36 cursor: pointer; 37 z-index: 10; 38 } 39 40 #pre:hover{ 41 background: url(../img/L2.png); 42 } 43 44 #next{ 45 width: 37px; 46 height: 63px; 47 background: url(../img/R1.png); 48 position: absolute; 49 top: 120px; 50 right: 5px; 51 cursor: pointer; 52 z-index: 10; 53 } 54 55 #next:hover{ 56 background: url(../img/R2.png); 57 } 58 59 #circle .first{ 60 background-color: darkgrey; 61 } 62 63 #circle{ 64 position: absolute; 65 top: 240px; 66 left: 130px; 67 z-index: 10; 68 height: 40px; 69 z-index: 2; 70 } 71 72 #circle span{ 73 display: inline-block; 74 width: 20px; 75 height: 20px; 76 border-radius: 10px; 77 background-color: white; 78 margin-left: 8px; 79 } 80 </style> 81 </head> 82 <body> 83 <div id="container"> 84 <div id="pic"> 85 <img src="img/1.jpg" alt=""/> 86 <img src="img/2.jpg" alt=""/> 87 <img src="img/3.jpg" alt="3"/> 88 <img src="img/4.jpg" alt=""/> 89 <img src="img/5.jpg" alt=""/> 90 <img src="img/6.jpg" alt=""/> 91 <img src="img/7.jpg" alt=""/> 92 </div> 93 <div id="pre"></div> 94 <div id="next"></div> 95 <div id="circle"> 96 <span class="first"></span> 97 <span></span> 98 <span></span> 99 <span></span>100 <span></span>101 <span></span>102 <span></span>103 </div>104 </div>105 106 <script>107 //索引值:控制全局108 var index = 0;109 var pic = document.getElementById("pic");110 var pre = document.getElementById("pre");111 var next = document.getElementById("next");112 113 ////切换下一张图片114 function next_pic () {115 index++;116 if(index == 7){117 index = 0;118 }119 pic.style.left = -450*index + "px";120 showCurrentCircle(); 121 }122 123 //切换上一张图片124 function pre_pic () {125 index--;126 if(index == -1){127 index = 6;128 }129 pic.style.left = -450*index + "px";130 showCurrentCircle(); 131 } 132 133 //点击下一张照片的事件134 next.onclick = function () {135 next_pic();136 }137 138 //点击上一张照片的事件139 pre.onclick = function () {140 pre_pic();141 }142 143 var timer = null;144 //无限计时器,自动循环播放照片145 function autoPlay () {146 timer = setInterval(function () {147 //调用148 next_pic();149 },2000);150 }151 //调用 152 autoPlay();153 154 var container = document.getElementById("container");155 //鼠标移入图片范围,移除计时器,图片自动轮播停止156 container.onmouseenter = function () {157 clearInterval(timer);158 }159 ////鼠标离开图片范围,计时器重启,图片自动轮播160 container.onmouseleave = function () {161 autoPlay(); 162 }163 164 var circle = document.getElementsByTagName("span");165 //下方原点颜色跟随图片切换166 function showCurrentCircle () {167 //清除已经轮播过的圆点类168 for(var i = 0; i < circle.length; i++){169 circle[i].className = "";170 console.log(i)171 }172 //再将原本的圆点类名赋给当前所轮播到的圆点173 circle[index].className = "first";174 }175 176 //let:类似闭包效果,177 for (let i = 0; i < circle.length; i++){
178 circle[i].onclick = function () {179 pic.style.left = -450*i + "px";180 index = i;181 showCurrentCircle();182 }183 }184 </script>185 </body>186 </html>
效果图如上: