?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>Document</title> ?6 ????????<style type="text/css"> ?7 ????* { ?8 ????????padding: 0; ?9 ????????margin: 0; 10 ????????list-style: none; 11 ????????border: 0; 12 ????} 13 ?14 ????.all { 15 ????????width: 500px; 16 ????????height: 200px; 17 ????????padding: 7px; 18 ????????border: 1px solid #ccc; 19 ????????margin: 100px auto; 20 ????????position: relative; 21 ????} 22 ?23 ????.screen { 24 ????????width: 500px; 25 ????????height: 200px; 26 ????????overflow: hidden; 27 ????????position: relative; 28 ????} 29 ?30 ????.screen li { 31 ????????width: 500px; 32 ????????height: 200px; 33 ????????overflow: hidden; 34 ????????float: left; 35 ????} 36 ?37 ????.screen ul { 38 ????????position: absolute; 39 ????????left: 0; 40 ????????top: 0px; 41 ????????width: 3000px; 42 ????} 43 ?44 ????.all ol { 45 ????????position: absolute; 46 ????????right: 10px; 47 ????????bottom: 10px; 48 ????????line-height: 20px; 49 ????????text-align: center; 50 ????} 51 ?52 ????.all ol li { 53 ????????float: left; 54 ????????width: 20px; 55 ????????height: 20px; 56 ????????background: #fff; 57 ????????border: 1px solid #ccc; 58 ????????margin-left: 10px; 59 ????????cursor: pointer; 60 ????} 61 ?62 ????.all ol li.current { 63 ????????background: yellow; 64 ????} 65 ?66 ????#arr { 67 ????????display: none; 68 ????} 69 ?70 ????#arr span { 71 ????????width: 40px; 72 ????????height: 40px; 73 ????????position: absolute; 74 ????????left: 5px; 75 ????????top: 50%; 76 ????????margin-top: -20px; 77 ????????background: #000; 78 ????????cursor: pointer; 79 ????????line-height: 40px; 80 ????????text-align: center; 81 ????????font-weight: bold; 82 ????????font-family: ‘黑体‘; 83 ????????font-size: 30px; 84 ????????color: #fff; 85 ????????opacity: 0.3; 86 ????????border: 1px solid #fff; 87 ????} 88 ?89 ????#arr #right { 90 ????????right: 5px; 91 ????????left: auto; 92 ????} 93 ????</style> 94 </head> 95 <body> 96 ????<div class="all" id=‘all‘> 97 ????<div class="screen" id="screen"> 98 ????????<ul id="ul"> 99 ????????????<li><img src="images/carousel/1.jpg" width="500" height="200" /></li>100 ????????????<li><img src="images/carousel/2.jpg" width="500" height="200" /></li>101 ????????????<li><img src="images/carousel/3.jpg" width="500" height="200" /></li>102 ????????????<li><img src="images/carousel/4.jpg" width="500" height="200" /></li>103 ????????????<li><img src="images/carousel/5.jpg" width="500" height="200" /></li>104 ????????</ul>105 ????????<ol>106 ????????</ol>107 ????????<div id="arr">108 ????????????<span id="left"><</span>109 ????????????<span id="right">></span>110 ????????</div>111 ????</div>112 </div>113 114 <script>115 ????//1.获取事件源116 ????var all = document.getElementById("all");117 ????var screen = all.firstElementChild || all.firstChild;118 ????var imgWidth = screen.offsetWidth;119 ????var ul = screen.firstElementChild || screen.firstChild;120 ????var ol = screen.children[1];121 ????var div = screen.lastElementChild || screen.lastChild;122 ????var spanArr = div.children;123 124 ????//2.复制第一张图片所在的li，添加到ul的最后面125 ????var ulNewLi = ul.children[0].cloneNode(true);126 ????ul.appendChild(ulNewLi);127 128 ????//3.给ol添加li，ul的个数-1个，并点亮第一个按钮129 ????for (var i = 0; i < ul.children.length - 1; i++) {130 ????????var olNewLi = document.createElement("li");131 ????????olNewLi.innerHTML = i + 1;132 ????????ol.appendChild(olNewLi);133 ????}134 135 ????var olLiArr = ol.children;136 ????olLiArr[0].className = "current";137 138 ????//4.鼠标放到ol的li上，切换图片139 ????for (var i = 0; i < olLiArr.length; i++) {140 ????????olLiArr[i].index = i;141 ????????olLiArr[i].onmouseover = function(){142 ????????????for (var j = 0; j < olLiArr.length; j++) {143 ????????????????olLiArr[j].className = "";144 ????????????}145 ????????????this.className = "current";146 ????????????//鼠标放到小的方块上的时候索引值和key以及square同步147 ????????????key = square = this.index;148 ????????????//移动盒子149 ????????????animate(ul,-this.index * imgWidth);150 ????????}151 ????}152 153 ????//5.添加定时器154 ????var timer = setInterval(autoPlay,1000);155 ????//固定向右切换图片，两个定时器（一个记录图片，一个记录小方块）156 ????var key = 0;157 ????var square = 0;158 159 ????function autoPlay(){160 ????????//通过控制key的自增来模拟图片的索引值，然后移动ul161 ????????key ++;162 ????????if (key > olLiArr.length) {163 ????????????//图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张164 ????????????ul.style.left = 0;165 ????????????key = 1;166 ????????}167 ????????animate(ul,-key * imgWidth);168 ????????//通过控制square的自增来模拟小方块的索引值，然后点亮盒子169 ????????square ++;170 ????????if (square > olLiArr.length - 1) {171 ????????????square = 0;172 ????????}173 ????????for (var i = 0; i < olLiArr.length; i++) {174 ????????????olLiArr[i].className = "";175 ????????}176 ????????olLiArr[square].className = "current";177 ????}178 179 ????//鼠标放上去清除定时器，移开后再开启定时器180 ????all.onmouseover = function(){181 ????????div.style.display = "block";182 ????????clearInterval(timer);183 ????}184 ????all.onmouseout = function(){185 ????????div.style.display = "none";186 ????????timer = setInterval(autoPlay, 1000);187 ????}188 189 ????//6.左右切换图片，鼠标放上去显示，移开隐藏190 ????spanArr[0].onclick = function(){191 ????????//通过控制key的自增来模拟图片的索引值，然后移动ul192 ????????key --;193 ????????if (key < 0) {194 ????????????//先移动到最后一张，然后key的值取之前一张的索引值，然后在向前移动195 ????????????ul.style.left = -imgWidth * (olLiArr.length) + "px";196 ????????????key = olLiArr.length - 1;197 ????????}198 ????????animate(ul, -key * imgWidth);199 ????200 201 ????????????//通过控制square的自增来模拟小方块的索引值，然后点亮盒子202 ????????//排他思想做小方块203 ????????square--;204 ????????if (square < 0) { //索引值不能大于等于5，如果等于5，立刻变为0；205 ????????????square = olLiArr.length - 1;206 ????????}207 ????????for (var i = 0; i < olLiArr.length; i++) {208 ????????????olLiArr[i].className = "";209 ????????}210 ????????olLiArr[square].className = "current";211 ????}212 ????spanArr[1].onclick = function() {213 ????????//右侧的和定时器一模一样214 ????????autoPlay();215 ????}216 ????????????function animate(ele, target) {217 ????????clearInterval(ele.timer);218 ????????var speed = target > ele.offsetLeft ? 10 : -10;219 ????????ele.timer = setInterval(function() {220 ????????????var val = target - ele.offsetLeft;221 ????????????ele.style.left = ele.offsetLeft + speed + "px";222 ????????????if (Math.abs(val) < Math.abs(speed)) {223 ????????????????ele.style.left = target + "px";224 ????????????????clearInterval(ele.timer);225 ????????????}226 ????????}, 10)227 ????}228 229 230 ????//7.231 </script>232 </body>233 </html>原生js轮播图实现
原文地址：https://www.cnblogs.com/knuzy/p/8850298.html