JS原生輪播圖程式碼
阿新 • • 發佈：2019-01-26
佈局一個這樣的輪播圖
難點在於圖4與圖1怎麼實現無縫輪播,巧妙的是把圖1插入圖4後面 12341...程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .box{ width: 490px; height: 327px; padding: 5px; border: 1px solid #cccccc; margin: 200px auto; } .inner { width: 490px; height: 327px; position: relative; overflow: hidden; } ul{ list-style: none; width: 500%; position: absolute; left:0px; } li{ float: left; } .square { position: absolute; bottom: 10px; right: 10px; } span { display: inline-block; width: 16px; height: 16px; background-color: #fff; text-align: center; margin: 3px; border: 1px solid #ccc; line-height: 16px; cursor: pointer !important; } .current { background-color: darkorange; color: #fff; } .box .inner img{ width: 490px; } .s{ width: 490px; height: 80px; position: absolute; top: 150px; left:0; color: #1bb52b; display: none; } .s #left{ width: 40px; height: 30px; text-align: center; float:left; font: 30px/30px "simsun"; background-color: rgba(0,0,0,0.8); } .s #right{ width: 40px; height: 30px; text-align: center; float:right; font: 30px/30px "simsun"; background-color: rgba(0,0,0,0.8); } </style> <script> window.onload=function () { //:獲取事件源 var k=0; var inner =document.getElementsByClassName("inner")[0]; var ul=inner.children[0]; var spanArr=inner.children[1].children; var imgWidth=inner.offsetWidth; var s=inner.children[2]; var sLeft =s.children[0]; var sRight =s.children[1]; var spanIndex= 0; var imgIndex=0; console.log(sRight); //: 1:定時器每隔1s自動輪播 var timer1=setInterval(autoPlay,3000); function autoPlay() { //span方塊定時變色 spanIndex++; if(spanIndex>spanArr.length-1){ spanIndex=0; } for(var i=0;i<spanArr.length;i++){ spanArr[i].className=""; } spanArr[spanIndex].className="current"; //ul左移,img右移 imgIndex++; if(imgIndex>spanArr.length){ ul.style.left= 0; imgIndex = 1; } animate(ul,-imgWidth*imgIndex); } //滑鼠放在inner上清除大的定時器 inner.onmouseover =function () { clearInterval(timer1); s.style.display="block"; } //滑鼠移開inner 加上定時器 inner.onmouseout =function () { timer1=setInterval(autoPlay,1000); s.style.display="none"; } // 2: span繫結事件, for(var i=0;i<spanArr.length;i++){ spanArr[i].index=i; spanArr[i].onmouseover=function () { clearInterval(timer1); //span變色 for(var j=0;j<spanArr.length;j++){ spanArr[j].className=""; } this.className="current"; spanIndex = imgIndex= this.index; //ul移動 animate(ul,-imgWidth*this.index); } } //3: 兩邊的箭頭加上事件.. sLeft.onclick =function () { spanIndex--; //span變色 for(var i=0;i<spanArr.length;i++){ spanArr[i].className=""; } if(spanIndex<0){ spanIndex=spanArr.length-1; } spanArr[spanIndex].className="current"; //ul移動 imgIndex--; if(imgIndex<0){ //先移動到最後一張，然後key的值取之前一張的索引值，然後在向前移動 ul.style.left = -imgWidth*(spanArr.length)+"px"; imgIndex = spanArr.length-1; } animate(ul,-imgIndex*imgWidth); } sRight.onclick =function () { autoPlay(); } function animate(ele,target) { clearInterval(ele.timer); var step=target>ele.offsetLeft?10:-10; ele.timer=setInterval(function () { ele.style.left=ele.offsetLeft+step+"px"; var delta=target-ele.offsetLeft; if(Math.abs(delta)<=Math.abs(step)){ ele.style.left=target+"px"; clearInterval(ele.timer); } },10) } } </script> </head> <body> <div class="box"> <div class="inner"> <ul> <li><img src="Student/1.jpg" alt=""/></li> <li><img src="Student/2.jpg" alt=""/></li> <li><img src="Student/3.jpg" alt=""/></li> <li><img src="Student/4.jpg" alt=""/></li> <li><img src="Student/1.jpg" alt=""/></li> </ul> <div class="square"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="s"> <span id="left"><</span> <span id="right">></span> </div> </div> </div> </body> </html>