| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| text-decoration: none; | |
| } | |
| #container{ | |
| 600px; | |
| height: 400px; | |
| border: 3px solid gold; | |
| position: relative; | |
| margin: 300px auto; | |
| overflow: hidden; | |
| z-index: 2; | |
| /*transition: all 0.5s ease;*/ | |
| } | |
| #list{ | |
| 3600px; | |
| height: 400px; | |
| position: absolute; | |
| z-index: 1; | |
| left: -600px; | |
| } | |
| #list img{ | |
| 600px; | |
| height: 400px; | |
| float: left; | |
| } | |
| span{ | |
| position: absolute; | |
| display: block; | |
| 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| z-index: 2; | |
| background: gainsboro; | |
| bottom: 10px; | |
| } | |
| p{ | |
| z-index: 2; | |
| 50px; | |
| line-height: 50px; | |
| background: rgba(0,0,0,0.3); | |
| color: white; | |
| position: absolute; | |
| font-size: 40px; | |
| text-align: center; | |
| } | |
| .p1{ | |
| top: 175px; | |
| left: 0; | |
| } | |
| .p2{ | |
| top: 175px; | |
| right: 0px; | |
| } | |
| #container:hover .p1,#container:hover .p2{ | |
| background: rgba(0,0,0,0.7); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="list"> | |
| <img src="img/4.jpg" alt="" /> | |
| <img src="img/1.jpg" alt="" /> | |
| <img src="img/2.jpg" alt="" /> | |
| <img src="img/3.jpg" alt="" /> | |
| <img src="img/4.jpg" alt="" /> | |
| <img src="img/1.jpg" alt="" /> | |
| </div> | |
| <p class="p1" onclick="lfClick(10)"><</p> | |
| <p class="p2" onclick="lfClick(-10)">></p> | |
| <span onclick="oClick(-600,0)"></span> | |
| <span onclick="oClick(-1200,1)"></span> | |
| <span onclick="oClick(-1800,2)"></span> | |
| <span onclick="oClick(-2400,3)"></span> | |
| </div> | |
| </body> | |
| <script type="text/javascript"> | |
| var list = document.getElementById('list'); | |
| var ps = document.querySelectorAll('p'); | |
| var timer = null ; | |
| var spans = document.querySelectorAll('span'); | |
| var timeOut = null; | |
| for(var i = 0 ;i<spans.length; i++){ | |
| spans[i].style.left = 250 + i*20 + 'px'; | |
| } | |
| timer=setInterval(doMove,20); | |
| function doMove(){ | |
| var speed = parseInt(getStyle()) - 10; | |
| list.style.left = speed +'px'; | |
| if(speed %600 ==0){ | |
| clearInterval(timer); | |
| timeOut = setTimeout(function(){ | |
| timer=setInterval(doMove,20); | |
| },1000); | |
| } | |
| btnColor(speed); | |
| } | |
| //前后事件 | |
| var setInter =null; | |
| // ps[0].onclick = lfClick(10); | |
| function lfClick(dir) { | |
| clearInterval(timer); | |
| clearInterval(setInter); | |
| if(parseInt(getStyle()) < -600 && parseInt(getStyle())>-1200){ | |
| list.style.left = -600 +'px'; | |
| } | |
| if(parseInt(getStyle()) < -1200 && parseInt(getStyle())>-1800){ | |
| list.style.left = -1200 +'px'; | |
| } | |
| if(parseInt(getStyle()) < -1800 && parseInt(getStyle())>-2400){ | |
| list.style.left = -1800 +'px'; | |
| } | |
| if(parseInt(getStyle()) < -2400 && parseInt(getStyle())>-3000){ | |
| list.style.left = -2400 +'px'; | |
| } | |
| setInter = setInterval(function(){ | |
| clearInterval(timer); | |
| clearTimeout(timeOut); | |
| var speed = parseInt(getStyle()) + dir ; | |
| list.style.left = speed + 'px'; | |
| btnColor(speed); | |
| if(speed %600 == 0){ | |
| clearInterval(setInter); | |
| timeOut = setTimeout(function(){ | |
| timer=setInterval(doMove,20); | |
| },1000); | |
| if(speed == 0){ | |
| list.style.left = '-2400px'; | |
| } | |
| if(speed == -3000){ | |
| list.style.left = '-600px'; | |
| } | |
| } | |
| },10) | |
| } | |
| function getStyle(){ | |
| return list.currentStyle? list.currentStyle.left:getComputedStyle(list).left; | |
| } | |
| function oClick(dir,index){ | |
| clearInterval(timer); | |
| clearTimeout(timeOut) | |
| list.style.left = dir + 'px'; | |
| for(var i = 0 ;i<spans.length; i++){ | |
| spans[i].style.background='gainsboro'; | |
| } | |
| spans[index].style.background = 'red'; | |
| timeOut = setTimeout(function(){ | |
| timer=setInterval(doMove,20); | |
| },1000); | |
| } | |
| function btnColor(speed){ | |
| if(speed == -600 ){ | |
| spans[0].style.background = 'red'; | |
| spans[3].style.background = 'gainsboro'; | |
| spans[1].style.background = 'gainsboro'; | |
| } | |
| if(speed == -1200 ){ | |
| spans[1].style.background = 'red'; | |
| spans[0].style.background = 'gainsboro'; | |
| spans[2].style.background = 'gainsboro'; | |
| } | |
| if(speed == -1800){ | |
| spans[2].style.background = 'red'; | |
| spans[1].style.background = 'gainsboro'; | |
| spans[3].style.background = 'gainsboro'; | |
| } | |
| if(speed == -2400 ||speed ==0){ | |
| spans[3].style.background = 'red'; | |
| spans[2].style.background = 'gainsboro'; | |
| spans[0].style.background = 'gainsboro'; | |
| } | |
| if(speed == -3000){ | |
| list.style.left = -600 +'px'; | |
| spans[0].style.background = 'red'; | |
| spans[3].style.background = 'gainsboro'; | |
| } | |
| } | |
| </script> | |
| </html> |