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的自增来模拟图片的索引值,然后移动ul 161 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的自增来模拟图片的索引值,然后移动ul 192 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>
原文地址:https://www.cnblogs.com/knuzy/p/8850298.html
时间: 2024-11-02 23:54:54