这个小项目是在网上看到的，通过它，我第一次使用了CSS,虽然感觉使用起来非常的繁琐，此外我修复了一些bug,加了一张图片，改动了一些地方
附上文件压缩包下载地址：https://i-beta.cnblogs.com/files
HTML代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <link rel="stylesheet" href="demo.css"> 7 </head> 8 <body> 9 <div class="wrapper"> 10 <div class="box"> 11 <ul class = 'imgbox'> 12 <li class = "imgshow"><img src="img/1.jpg" alt=""></li> 13 <li class = "imgshow"><img src="img/2.jpg" alt=""></li> 14 <li class = "imgshow"><img src="img/3.jpg" alt=""></li> 15 <li class = "imgshow"><img src="img/4.jpg" alt=""></li> 16 </ul> 17 </div> 18 <div class="next"></div> 19 <div class="last"></div> 20 <div class="dot"> 21 <ul> 22 <li class = 'act'><a href="#"></a></li> 23 <li><a href="#"></a></li> 24 <li><a href="#"></a></li> 25 <li><a href="#"></a></li> 26 </ul> 27 </div> 28 </div> 29 </body> 30 31 <script src="demo.js"></script> 32 </html>
JS代码：
1 var timer = null, 2 timerInv = null, 3 window_width = 720, 4 index = 0, 5 flag = true, 6 step = 0, 7 img_count = 5, 8 newLeft = 0, 9 locatArr = [0, -720, -1440, -2160,-2880]; 10 var box = document.getElementsByClassName('box')[0], 11 dot = document.getElementsByClassName('dot')[0]; 12 13 14 15 function disPlay () { 16 var initLeft = parseInt(window.getComputedStyle(box).left); 17 if(index == img_count - 1){ 18 moveTo(0); 19 index = 0; 20 }else{ 21 moveTo(++index); 22 } 23 console.log("display") 24 } 25 26 27 function lastPlay () { 28 if(index == 0){ 29 moveTo(4); 30 index = 4; 31 }else{ 32 moveTo(--index); 33 } 34 console.log("lastPlay") 35 } 36 function nextPlay () { 37 console.log("nextPlay执行") 38 if(index ==4){ 39 moveTo(0); 40 index = 0; 41 }else{ 42 moveTo(++index); 43 } 44 console.log("nextPlay执行") 45 } 46 47 function bindEvent() { 48 var li = dot.getElementsByTagName('li'); 49 var next = document.getElementsByClassName('next')[0]; 50 var last = document.getElementsByClassName('last')[0]; 51 console.log("bindEvent") 52 next.addEventListener('click',function () { 53 clearInterval(timer); 54 nextPlay(); 55 timer = setInterval(disPlay,2000); 56 console.log("click nextplay") 57 }); 58 last.addEventListener('click',function() { 59 clearInterval(timer); 60 lastPlay(); 61 timer = setInterval(disPlay,2000); 62 console.log("click lastplay") 63 }); 64 for(var i = 0; i < 5; i++){ 65 (function (j) { 66 li[j].addEventListener('click',function () { 67 clearInterval(timer); 68 index = j; 69 moveTo(index); 70 timer = setInterval(disPlay,2000); 71 }) 72 }(i)) 73 } 74 } 75 76 function moveTo(location) { 77 console.log("moveTo") 78 var target_position = parseInt(window.getComputedStyle(box).left) - locatArr[location]; 79 box.style.left = locatArr[location] + 'px'; 80 } 81 82 function start(){ 83 timer= setInterval(disPlay,1000000); 84 var timeDot = setInterval(function (){ 85 var dots= document.getElementsByClassName('dot')[0]; 86 var singledot= dots.getElementsByTagName('li'); 87 for(var i=0;i<4;i++){ 88 singledot[i].className= ''; 89 } 90 singledot[index].className= 'act'; 91 },20); 92 bindEvent(); 93 console.log("start") 94 } 95 96 start();
CSS代码：
1 *{ 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 } 6 7 body{ 8 background-color: #ccc; 9 } 10 .wrapper{ 11 width: 720px; 12 height: 410px; 13 margin: 100px auto; 14 overflow: hidden; 15 position: relative; 16 } 17 .wrapper .box{ 18 width: 500%; 19 position: absolute; 20 left: 0; 21 top: 0; 22 transition: left 1s; 23 } 24 .box ul li{ 25 float: left; 26 } 27 28 .box img{ 29 width: 720px; 30 height: 410px; 31 } 32 .wrapper .next{ 33 width: 0px; 34 height: 0px; 35 position: absolute; 36 z-index: 99; 37 right: -17px; 38 top: 185px; 39 border: 30px solid rgba(200,200,200,0.4); 40 border-right-color:transparent; 41 border-top-color: transparent; 42 border-bottom-color: transparent; 43 } 44 .wrapper .next:hover{ 45 border: 30px solid rgba(200,200,200,0.9); 46 border-right-color:transparent; 47 border-top-color: transparent; 48 border-bottom-color: transparent; 49 cursor: pointer; 50 } 51 .wrapper .last{ 52 width: 0px; 53 height: 0px; 54 position: absolute; 55 z-index: 99; 56 left: -17px; 57 top: 185px; 58 border: 30px solid rgba(200,200,200,0.4); 59 border-left-color:transparent; 60 border-top-color: transparent; 61 border-bottom-color: transparent; 62 } 63 .wrapper .last:hover{ 64 border: 30px solid rgba(200,200,200,0.9); 65 border-left-color:transparent; 66 border-top-color: transparent; 67 border-bottom-color: transparent; 68 cursor: pointer; 69 } 70 .wrapper .dot{ 71 width: 500px; 72 height: 30px; 73 position: absolute; 74 top: 330px; 75 left: 295px; 76 line-height: 60px; 77 } 78 .wrapper .dot li{ 79 width: 15px; 80 height: 15px; 81 background-color:rgba(200,200,200,0.4); 82 border: 2px solid #eee; 83 border-radius: 50%; 84 float: left; 85 margin-right: 20px; 86 cursor: pointer; 87 } 88 .wrapper .dot li:hover{ 89 background-color:rgba(200,200,200,1); 90 } 91 .wrapper .dot .act{ 92 background-color:rgba(200,200,200,0.8); 93 }