移動輪播圖的兩種寫法
阿新 • • 發佈：2019-01-07
第一種
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { list-style: none; padding: 0; margin: 0; } img { width: 300px; height: 300px; } ul { display: flex; position: relative; /*left: -300px;*/ left: 0px; } .box { overflow: hidden; width: 300px; height: 300px; margin: 0 auto; position: relative; } .btn { width: 300px; margin: 0 auto; text-align: center; } button { width: 50px; } </style> </head> <body> <div class="box"> <ul> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> </ul> </div> <div class="btn"> <button><</button> <button>></button> </div> </body> <script type="text/javascript"> var arrLi = document.getElementsByTagName("li"); var arrBtn = document.getElementsByTagName("button"); var oUl = document.getElementsByTagName("ul")[0]; var moDis = arrLi[0].offsetWidth; var kai=true; arrBtn[1].addEventListener("click", rgt) function rgt() { if (kai) { kai=false; oUl.style.transition = "2s ease"; oUl.style.left = -moDis + "px"; setTimeout(function () { oUl.appendChild(oUl.firstElementChild) oUl.style.transition = "none"; oUl.style.left = 0 + "px"; kai=true; }, 2000) } }; arrBtn[0].addEventListener("click", lft); function lft() { if (kai) { kai=false; oUl.style.transition="none"; oUl.insertBefore(oUl.lastElementChild,oUl.firstChild); oUl.style.left=-moDis+"px"; setTimeout(function () { oUl.style.transition="2s ease"; oUl.style.left=0+"px"; },0); setTimeout(function () { kai=true; },2000); } }; </script> </html>
第二種
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ list-style: none; padding: 0; margin: 0; } img{ width: 300px; height: 300px; } ul{ display: flex; position: relative; left: -300px; } .box{ overflow: hidden; width: 300px; height:300px; margin: 0 auto; position:relative; } .btn{ width: 300px; margin: 0 auto; text-align: center; } button{ width: 50px; } .ball{ width: 100px; margin: 0 auto; left: 0; } .ball li{ width: 10px; height: 10px; border-radius: 50%; border:1px solid black; margin: 10px; } .act{ border-radius:50% ; background-color: black; } </style> </head> <body> <div class="box"> <ul> <li><img src="3.jpg"></li> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> <li><img src="1.jpg"></li> </ul> </div> <div class="btn"> <ul class="ball"> <li class="act"></li> <li></li> <li></li> </ul> <button><</button> <button>></button> </div> </body> <script type="text/javascript"> var arrLi=document.getElementsByTagName("li") var arrBtn=document.getElementsByTagName("button") var oUl=document.getElementsByTagName("ul") var arrBall=document.getElementsByClassName("ball")[0].getElementsByTagName('li'); var a=0 var kai=true var rgt var lft arrBtn[1].addEventListener("click",function rgt(){ if(kai){ kai=false if(oUl[0].style.left=="-1200px"){ a=0 oUl[0].style.left=-arrLi[a].offsetWidth+"px" oUl[0].style.transition="" } a++ oUl[0].style.left=-(a+1)*arrLi[a].offsetWidth+"px" oUl[0].style.transition="2s ease" for (var i = 0; i < arrBall.length; i++) { arrBall[i].className="" } if(a>2){ arrBall[0].className="act" } else{ arrBall[a].className="act" } setTimeout(function(){ kai=true},2000)} }) arrBtn[0].addEventListener("click",function lft(){ if(kai){ kai=false a-- oUl[0].style.left=-(a+1)*arrLi[a+1].offsetWidth+"px" oUl[0].style.transition="2s ease" for (var i = 0; i < arrBall.length; i++) { arrBall[i].className="" } if(a==-1){ arrBall[2].className="act" } else{ arrBall[a].className="act" } setTimeout(function(){ kai=true if(oUl[0].style.left=="0px"){ a=2 oUl[0].style.left=-900+"px"; oUl[0].style.transition="" } },2000) } }) // time=setInterval(function rgt(){ // if(kai){ // kai=false // if(oUl[0].style.left=="-1200px"){ // a=0 // oUl[0].style.left=-arrLi[a].offsetWidth+"px" // oUl[0].style.transition="" // } // a++ // oUl[0].style.left=-(a+1)*arrLi[a].offsetWidth+"px" // oUl[0].style.transition="2s ease" // for (var i = 0; i < arrBall.length; i++) { // arrBall[i].className="" // } // if(a>2){ // arrBall[0].className="act" // } // else{ // arrBall[a].className="act" // } // setTimeout(function(){ // kai=true},2000)} // },2000 ) oUl[0].style.transition="" var k=0 for (var i = 0; i < arrBall.length; i++) { arrBall[i].index=i arrBall[i].onclick=function(){ for (var j = 0; j < arrBall.length; j++) { arrBall[j].className="" } oUl[0].style.left=-(this.index+1)*arrLi[1].offsetWidth+"px" oUl[0].style.transition="0.5s ease" this.className="act" k=this.index } }
兩種寫法都可以用 第一種相對簡單很多，但是第二種可以獲取元素下標誌，一些輪播圖會有索引標籤，第二種方法可以加索引