?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 ?轮播图
原文地址：https://www.cnblogs.com/wcx-20151115-hzz/p/10098483.html