基于js和css，跟着网上的视频教程，结合自己想要的效果，做出了一个类似于淘宝海报的效果。
如图：淘宝首页
自己做的：
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>lunbo3</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 li{ 12 list-style: none; 13 } 14 a{ 15 text-decoration: none; 16 } 17 img{ 18 vertical-align: middle; 19 } 20 .warp{ 21 width: 640px; 22 height: 270px; 23 margin: 0 auto; 24 position: relative; 25 overflow: hidden; 26 } 27 .box{ 28 height: 270px; 29 position: absolute; 30 left: 0px; 31 /*平移过渡动画，时间为半秒钟*/ 32 transition: all 0.5s; 33 } 34 .box li{ 35 width: 640px; 36 height: 270px; 37 float: left; 38 } 39 .box li a{ 40 width: 640px; 41 height: 270px; 42 } 43 .box li a img{ 44 width: 100%; 45 height: 100%; 46 cursor: pointer; 47 } 48 .buts span{ 49 color: #FFFFFF; 50 display: none; 51 width: 8px; 52 height: 14px; 53 line-height: 18px; 54 background-color: rgba(0,0,0,0.5); 55 text-align: center; 56 margin: 0 auto; 57 cursor: pointer; 58 -moz-user-select: none; /*火狐*/ 59 -webkit-user-select: none; /*webkit浏览器*/ 60 -ms-user-select: none; /*IE10*/ 61 -khtml-user-select: none; /*早期浏览器*/ 62 user-select: none; 63 64 }.buts span:hover{ 65 background-color: rgba(0,0,0,0.8); 66 } 67 .buts span img{ 68 display: block; 69 width: 8px; 70 height: 14px; 71 } 72 .butL{ 73 position: absolute; 74 z-index: 100; 75 top: 120px; 76 padding: 10px 10px 10px 5px; 77 border-top-right-radius: 17px; 78 border-bottom-right-radius: 17px; 79 } 80 .butR{ 81 position: absolute; 82 z-index: 100; 83 top: 120px; 84 right: 0; 85 padding: 10px 5px 10px 10px; 86 border-top-left-radius: 17px; 87 border-bottom-left-radius: 17px; 88 } 89 .dotBox{ 90 position: absolute; 91 z-index: 999; 92 bottom: 10px; 93 width: 100%; 94 height: 18px; 95 text-align: center; 96 } 97 .dot{ 98 display: inline-block; 99 margin: 0 auto; 100 height: 8px; 101 padding: 5px; 102 border-radius: 15px; 103 background-color: rgba(255,255,255,0.3); 104 } 105 .dot li{ 106 float: left; 107 width: 8px; 108 height: 8px; 109 line-height: 8px; 110 border-radius: 4px; 111 color: #FFFFFF; 112 text-align: center; 113 margin: 0 4px; 114 background-color: #FFFFFF; 115 cursor: pointer; 116 user-select:none; 117 -moz-user-focus: none; 118 -webkit-user-select: none; 119 -lhtml-user-select:none; 120 -moz-user-select: none; 121 -ms-user-select: none; 122 font-size: 10px; 123 } 124 .dot li:hover{ 125 background-color: #FF0000; 126 } 127 #dotIs{ 128 background-color: #FF0000; 129 } 130 </style> 131 132 </head> 133 <body> 134 <div class="warp"> 135 <!--图片--> 136 <ul class="box" id="box"> 137 <li><a href="#"><img src="../image/lunbo/00.jpg" /></a></li> 138 <li><a href="#"><img src="../image/lunbo/01.jpg" /></a></li> 139 <li><a href="#"><img src="../image/lunbo/02.jpg" /></a></li> 140 <li><a href="#"><img src="../image/lunbo/03.jpg" /></a></li> 141 <li><a href="#"><img src="../image/lunbo/04.jpg" /></a></li> 142 <li><a href="#"><img src="../image/lunbo/05.jpg" /></a></li> 143 </ul> 144 <!--按钮--> 145 <div class="buts"> 146 <span class="butL" id="butL"><img src="../image/lunbo/L.png" /></span> 147 <span class="butR" id="butR"><img src="../image/lunbo/R.png" /></span> 148 </div> 149 <!--圆点--> 150 <div class="dotBox"> 151 <ul class="dot" id="dot"> 152 <li id="dotIs"></li> 153 <li></li> 154 <li></li> 155 <li></li> 156 <li></li> 157 <li></li> 158 </ul> 159 </div> 160 </div> 161 162 <script type="text/javascript"> 163 window.onload = function(){ 164 165 //获取ul（图片外框） 166 var box = document.getElementById("box"); 167 //获取li（图片） 168 var li = box.getElementsByTagName("li"); 169 //获取单个li宽度（单张图片宽度） 170 var liWidth = li[0].scrollWidth; 171 //获取左按钮 172 var butL = document.getElementById("butL"); 173 //获取右按钮 174 var butR = document.getElementById("butR"); 175 //获取小圆点 176 var dot = document.getElementById("dot").getElementsByTagName("li"); 177 //定义数字 178 var index = 0; 179 //定义开关 180 var flag = true; 181 182 //更改图片外框宽度（图片的数量*单张图片的宽度） 183 box.style.width = li.length*liWidth+"px"; 184 185 //点击下一张 186 butR.onclick = function(){ 187 //判断flag是否为true 188 if(flag){ 189 //更改flag为false 190 flag = false; 191 //数字加1 192 index++; 193 //判断数字是否等于图片的总数量 194 if(index == li.length){ 195 //将数字改为0 196 index = 0; 197 }; 198 //更改图片外边框的left，向左边移动，移动的尺寸为数字*单张图片图片的宽度 199 box.style.left = -index*liWidth+"px"; 200 //遍历循环查找小圆点下标位置 201 for(var i = 0 ; i < dot.length; i++){ 202 //判断小圆点的下标位置是否与数字相同 203 if(i == index){ 204 //更改已匹配到li，将已写好的css样式id名字赋给它 205 dot[index].id = "dotIs"; 206 }else{ 207 //去掉未匹配的id名字 208 dot[i].id = ""; 209 }; 210 }; 211 //延迟执行，500毫秒之后执行，延迟的时间与css的transition: all 0.5s;的5s一致 212 setTimeout(function(){ 213 //改变flag为true 214 flag = true; 215 },500) 216 }; 217 }; 218 219 //点击上一张 220 butL.onclick = function(){ 221 //判断flag是否为true 222 if(flag){ 223 //更改flag为false 224 flag = false; 225 //数字减1 226 index--; 227 //判断数字是否小于0 228 if(index < 0){ 229 //将数字图片总数的数字 230 index = li.length-1 231 }; 232 //更改图片外边框的left，向右边移动，移动的尺寸为数字*单张图片图片的宽度 233 box.style.left = -index*liWidth+"px"; 234 //遍历循环查找小圆点下标位置 235 for(var i = 0 ; i < dot.length; i++){ 236 //判断小圆点的下标位置是否与数字相同 237 if(i == index){ 238 dot[index].id = "dotIs"; 239 //更改已匹配到li，将已写好的css样式id名字赋给它 240 }else{ 241 //去掉未匹配的id名字 242 dot[i].id = ""; 243 }; 244 }; 245 //延迟执行，500毫秒之后执行，延迟的时间与css的transition: all 0.5s;的5s一致 246 setTimeout(function(){ 247 //改变flag为true 248 flag = true; 249 },500); 250 }; 251 }; 252 253 //设置自动播放 254 function play(){ 255 //连续不断持续的执行 256 lunbo = setInterval(function(){ 257 //数字加1 258 index++; 259 //判断数字是否等于图片的总数量 260 if(index == li.length){ 261 //将数字改为0 262 index = 0; 263 }; 264 //更改图片外边框的left，向左边移动，移动的尺寸为数字*单张图片图片的宽度 265 box.style.left = -index*liWidth+"px"; 266 //遍历循环查找小圆点下标位置 267 for(var i = 0 ; i < dot.length; i++){ 268 //判断小圆点的下标位置是否与数字相同 269 if(i == index){ 270 //更改已匹配到li，将已写好的css样式id名字赋给它 271 dot[index].id = "dotIs"; 272 }else{ 273 //去掉未匹配的id名字 274 dot[i].id = ""; 275 }; 276 }; 277 //每3000（3秒）执行一次。 278 },3000); 279 }; 280 281 //设置停止自动播放 282 function stop(){ 283 //停止（lunbo）已写好的持续执行方法。 284 clearTimeout(lunbo); 285 }; 286 287 //默认启动自动播放 288 play(); 289 290 //点击圆点 291 for(var i = 0; i < dot.length; i++){ 292 //给每个小圆点赋值，每个小圆点都有一个相对应的数字。 293 dot[i].is = i; 294 //鼠标移入小圆点 295 dot[i].onmouseover = function(){ 296 //停止图片自动播放 297 stop(); 298 } 299 300 //鼠标移出小圆点 301 dot[i].onmouseout = function(){ 302 //图片继续自动播放 303 play(); 304 } 305 306 //点击小圆点 307 dot[i].onclick = function(){ 308 //更改图片外边框的left，向选择的小圆点移动方向，移动的尺寸为小圆点的数字*单张图片图片的宽度 309 box.style.left = -this.is*liWidth+"px"; 310 //循环遍历小圆点 311 for(var i = 0 ; i < dot.length; i++){ 312 //判断小圆点的数字是否等于选中的小圆点数字 313 if(i == this.is){ 314 //更改数字（index）等于的小圆点选中的数字 315 index = dot[i].is; 316 //更改已匹配到li，将已写好的css样式id名字赋给它 317 dot[this.is].id = "dotIs"; 318 }else{ 319 //去掉未匹配的id名字 320 dot[i].id = ""; 321 }; 322 }; 323 }; 324 }; 325 326 //鼠标移入左按钮 327 butL.onmouseover = function(){ 328 //停止自动轮播 329 stop(); 330 //左按钮显示 331 butL.style.display = "block"; 332 //右按钮显示 333 butR.style.display = "block"; 334 }; 335 336 //鼠标移出左按钮 337 butL.onmouseout = function(){ 338 //继续自动轮播 339 play(); 340 //左按钮隐藏 341 butL.style.display = "none"; 342 //右按钮隐藏 343 butR.style.display = "none"; 344 } 345 346 //鼠标移入右按钮 347 butR.onmouseover = function(){ 348 //停止自动轮播 349 stop(); 350 //左按钮显示 351 butL.style.display = "block"; 352 //右按钮显示 353 butR.style.display = "block"; 354 }; 355 356 //鼠标移出右按钮 357 butR.onmouseout = function(){ 358 //继续自动轮播 359 play(); 360 //左按钮隐藏 361 butL.style.display = "none"; 362 //右按钮隐藏 363 butR.style.display = "none"; 364 } 365 366 //鼠标移入图片 367 box.onmouseover = function(){ 368 //停止自动轮播 369 stop(); 370 //左按钮显示 371 butL.style.display = "block"; 372 //右按钮显示 373 butR.style.display = "block"; 374 }; 375 376 //鼠标移出图片 377 box.onmouseout = function(){ 378 //继续自动轮播 379 play(); 380 //左按钮隐藏 381 butL.style.display = "none"; 382 //右按钮隐藏 383 butR.style.display = "none"; 384 } 385 386 } 387 </script> 388 </body> 389 </html>
未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。
扫一扫
961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
