HTML+CSS +JS 轮播图

 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>

效果图如上:

相关文章