HTML+CSS +JS 轮播图
Posted 薇依
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
效果图如上：
以上是关于HTML+CSS +JS 轮播图的主要内容，如果未能解决你的问题，请参考以下文章
layui轮播图不会自动播放、这是代码哪位大神帮忙看一下问题出现在哪里？