JS製作簡單圖片輪播--通過調整margin製作
阿新 • • 發佈：2019-01-29
圖片輪播在網頁中使用的非常廣泛，製作的方法有很多，介紹一下我用調整margin來實現3張圖片輪播功能。
設計思路：
- 自動跳轉。三張圖片每隔3秒跳轉一張，第三張圖片跳轉完成後，3秒後跳轉至第一張圖片。
- 滑鼠控制。通過滑鼠點選跳轉按鈕完成跳轉。向左向右跳轉，同上第3張後是第一張，相反方向時，第一張後是第三張。
- 注意實項。滑鼠點選跳轉時，自動跳轉停止。
效果圖如下：
由於錄屏軟體原因導致效果不是很好。見諒
開發思路：
首先設定一個容器ul的width為300%，ul子元素li的width為30%（ul的30%即為螢幕的100%），
跳轉一次，ul的margin-left屬性增加 -100%，即第一張圖片ul{margin-left：0；}、第二張圖片ul{margin-left：-100%；}、第三張圖片ul{margin-left：-200%；}
使用setInterval 控制延時迴圈，通過JS進行計算，保證圖片輪播效果。
<style>
//css樣式
li{list-style:none;}
#head{width:100%;height:600px;overflow: hidden;}
#head ul{width:300%;height:600px;margin-top:0;padding:0;}
#head ul li{width:30%;height:590px;padding: 0;float:left;display: block;margin:0 1.66%;}
#head #listico{width: 100px;height:30 js程式碼如下：
window.onload=function (){
var tl =document.getElementById("turnright");
var tr =document.getElementById("turnleft");
var road =document.getElementById("road");
var olaf=document.getElementById("ol-f");
var olas=document.getElementById("ol-s");
var olat=document.getElementById("ol-t");
var timeId=null;
var i=0;
function listTime(){//頁數的顏色變化
switch(i){
case 0:
olaf.style.background="blue"
olas.style.background="none"
olat.style.background="none"
break;
case 1:
olaf.style.background="none"
olas.style.background="blue"
olat.style.background="none"
break;
case 2:
olaf.style.background="none"
olas.style.background="none"
olat.style.background="blue"
break;
}
}
function tpturnLeft(){//向左
i+=2;
i=i%3;
listTime();
if(i>0&&i<3){
var si =(100 * i);
road.style.marginLeft="-"+si+"%";
}else{
road.style.marginLeft="0";
i=0;
}
}
function tpturnRight(){//向右
i+=1;
i=i%3;
listTime();
if(i>0&&i<3){
var si =100 * i;
road.style.marginLeft="-"+si+"%";
}else{
road.style.marginLeft=0;
i=0;
}
}
timeId=setInterval(tpturnRight,3000);//自動輪播，3秒一次
tl.onclick=function(){//滑鼠控制輪播
if(timeId){//滑鼠點選時，清除自動輪播
clearInterval(timeId);
timeId=null;
}
tpturnRight();
timeId=setInterval(tpturnRight,3000);//滑鼠操作後三秒無操作時，轉為自動輪播
}
tr.onclick=function(){//滑鼠控制輪播
if(timeId){//滑鼠點選時，清除自動輪播
clearInterval(timeId);
timeId=null;
}
tpturnLeft();
timeId=setInterval(tpturnRight,3000);//滑鼠操作後三秒無操作時，轉為自動輪播
}
}補充：JS裡面，控制延時的除了setInterval外還有一個，setTimeout.他們的區別最簡單的就是前者可以迴圈執行，後僅一次。
setInterval（function, time）;//function為要執行的函式，time為延時時間，單位是毫秒。
clearInterval();對應的清除
setTimeout(function, time);//同setInterval
clearTimeout();//同clearInterval以上是作者自己的思路，求交流，求指正。