輪播 平滑移動
阿新 • • 發佈：2019-01-07
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; display: inline-block; } .box { width: 100px; height: 100px; margin: 0 auto; overflow: hidden; } .box ul { width: 700px; height: 100px; font-size: 0; position: relative; /*transition: all 1s ease;*/ } .box li { /*position: absolute;*/ font-size: 15px; } .box li:nth-of-type(1) { width: 100px; height: 100px; background-color: green; position: relative; } .box li:nth-of-type(2) { width: 100px; height: 100px; background-color: red; position: relative; } .box li:nth-of-type(3) { width: 100px; height: 100px; background-color: blue; position: relative; } .box li:nth-of-type(4) { width: 100px; height: 100px; background-color: pink; position: relative; } .box li:nth-of-type(5) { width: 100px; height: 100px; background-color: green; position: relative; } .box li:nth-of-type(6) { width: 100px; height: 100px; background-color: red; position: relative; } .act { margin: 0 auto; width: 100px; } .act li { cursor: pointer; } button { display: block; width: 50px; margin: 0 auto; } </style> <body> <div class="box"> <ul> <li>4</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>1</li> </ul> </div> <ul class="act"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <button>NEXT</button> <button>Pre</button> </ul> </body> <script type="text/javascript"> var arrbu = document.getElementsByTagName("button"); var oUL = document.getElementsByClassName("box")[0].getElementsByTagName("ul")[0]; var arrli = oUL.getElementsByTagName("li") var arrlii = document.getElementsByClassName("act")[0].getElementsByTagName("li"); for(i = 0; i < arrli.length; i++) { oUL.style.left = -100 + "px"; } var j = 1; var kai = true; arrbu[0].onclick = function() { if(kai) { kai = false; j++; oUL.style.left = -100 * j + "px"; oUL.style.transition = "2s ease" setTimeout(function() { kai = true; if(oUL.style.left == "-500px") { console.log(1) j = 1; oUL.style.transition = ""; oUL.style.left = -arrli[j].offsetWidth + "px"; } }, 1000); } } arrbu[1].onclick = function() { if(kai) { kai = false; j--; oUL.style.left = -100 * j + "px"; oUL.style.transition = "2s ease" setTimeout(function() { kai = true; if(oUL.style.left == "0px") { console.log(1) j = 4; oUL.style.transition = ""; oUL.style.left = -arrli[j].offsetWidth*j + "px"; } }, 1000); } } for(k = 0; k < arrlii.length; k++) { oUL.style.transition = "1s ease" arrlii[k].onclick = function(ev) { var hj = ev.target.innerText; oUL.style.left = -100 * hj + "px"; } } </script> </html>