js輪播圖改進版
阿新 • • 發佈：2021-08-10
window.onload=function(){
lunBoTU("ul01","buttonArea",770,154,"right");
//可以使用的版本僅限普通輪播
//目前穩定，還未實現豎直
functionlunBoTU(ulObj,buttonObj,picWidth,speed,direction){
//獲取ul
varul=document.getElementById(ulObj);
//獲取id為buttonArea的div
varbuttonArea=document.getElementById(buttonObj);
//獲取圖片寬度
varpicWidth=picWidth;
//獲取速度
varspeed=speed;
//獲取方向
vardirection=direction;
//獲取img列表
varpicList=document.querySelectorAll("#"+ulObj+"liimg");
//獲取列表長度
varpiclength=picList.length;
//設定上一個下標
varperIndex=0;
//防止圖片拖動，ondragstart
for(vari=0;i<piclength;i++){
picList[i].ondragstart=function(){
returnfalse;
}
}
//根據圖片數量批量新增按鈕並標序號 for(vari=0;i<piclength-1;i++){ buttonArea.innerHTML+="<ahref='javascript:;'>"+(i+1)+"</a>"; } //設定ul的寬度 ul.style.width=picWidth*piclength+"px"; //使按鈕區域居中 buttonArea.style.marginLeft="-"+(buttonArea.offsetWidth/2)+"px"; //獲取a標籤的列表 varallA=document.querySelectorAll("#"+buttonObj+"a"); //設定初始按鈕變色 setBlack(0); //建立自動輪播函式 //先宣告一個自動增長的index //將函式設定在物件裡後面才能找到該函式 varautoIndex=0; ul.timmerTwo=function(autoIndex){ ul.autotimmer=setInterval(function(){ autoIndex++; if(autoIndex>piclength-2){ autoIndex=0; } console.log("autoindex:"+autoIndex); MoveOnclickPic(autoIndex); },1000); }; ul.timmerTwo(autoIndex);
//為a標籤附上點選函式：點選切換圖片 for(vari=0;i<allA.length;i++){ allA[i].num=i; allA[i].onclick=function(){ console.log("按鍵：【"+this.num+"】點選"); clearInterval(ul.autotimmer); autoIndex=this.num; MoveOnclickPic(this.num,1); returnfalse; }; allA[i].ondragstart=function(){ returnfalse; } };
varMoveOnclickPic=function(index,flag){ //宣告目標距離
console.log("[2]perIndex:"+perIndex); console.log("[3]index:"+index);
vartarget=-(index*picWidth);
console.log("target:"+target); //設定的一些輪播規則便於圖片迴圈 //開始移動 if(perIndex==piclength-2&&index==0){ target=-((piclength-1)*picWidth); } elseif(perIndex==0&&index==piclength-2&&flag==1){ ul.style[direction]="-"+(piclength-1)*picWidth+"px"; target=-((piclength-2)*picWidth); } elseif(perIndex==0){ ul.style[direction]=0+"px"; } else{ target=-(index*picWidth); };
if(flag){ Move(ul,speed,direction,target,function(){ ul.timmerTwo(autoIndex); }); } else{ Move(ul,speed,direction,target,function(){ }); }
setBlack(index); //將index轉為被用過的perIndex perIndex=index; };
functionsetBlack(index){ for(vari=0;i<allA.length;i++){ //使內聯樣式變為空時，顏色為預設色 allA[i].style.backgroundColor=""; }; //將選定的index變為黑色 allA[index].style.backgroundColor="black"; } };
functionMove(obj,speed,attr,target,refunc){ //函式:物件，移動速度，方向，目標座標，返回函式; clearInterval(obj.timmer); //獲取當前座標 console.log("正在執行move方法"); console.log("目標距離:"+target); varnowLocation; nowLocation=parseInt(getComputedStyle(obj,null)[attr]); console.log("move方法中方向:"+attr); varnewLocation=nowLocation;
obj.timmer=setInterval(function(){ //獲得速度並設定移動方向得到新的座標 console.log("已進入timmer函式");
if(target<newLocation){ newLocation=newLocation-speed; } elseif(target>newLocation){ newLocation=newLocation+speed; } else{ newLocation=newLocation; };
obj.style[attr]=newLocation+"px";
if(newLocation==target){ refunc(); clearInterval(obj.timmer); }; },16); }; }
//根據圖片數量批量新增按鈕並標序號 for(vari=0;i<piclength-1;i++){ buttonArea.innerHTML+="<ahref='javascript:;'>"+(i+1)+"</a>"; } //設定ul的寬度 ul.style.width=picWidth*piclength+"px"; //使按鈕區域居中 buttonArea.style.marginLeft="-"+(buttonArea.offsetWidth/2)+"px"; //獲取a標籤的列表 varallA=document.querySelectorAll("#"+buttonObj+"a"); //設定初始按鈕變色 setBlack(0); //建立自動輪播函式 //先宣告一個自動增長的index //將函式設定在物件裡後面才能找到該函式 varautoIndex=0; ul.timmerTwo=function(autoIndex){ ul.autotimmer=setInterval(function(){ autoIndex++; if(autoIndex>piclength-2){ autoIndex=0; } console.log("autoindex:"+autoIndex); MoveOnclickPic(autoIndex); },1000); }; ul.timmerTwo(autoIndex);
//為a標籤附上點選函式：點選切換圖片 for(vari=0;i<allA.length;i++){ allA[i].num=i; allA[i].onclick=function(){ console.log("按鍵：【"+this.num+"】點選"); clearInterval(ul.autotimmer); autoIndex=this.num; MoveOnclickPic(this.num,1); returnfalse; }; allA[i].ondragstart=function(){ returnfalse; } };
varMoveOnclickPic=function(index,flag){ //宣告目標距離
console.log("[2]perIndex:"+perIndex); console.log("[3]index:"+index);
vartarget=-(index*picWidth);
console.log("target:"+target); //設定的一些輪播規則便於圖片迴圈 //開始移動 if(perIndex==piclength-2&&index==0){ target=-((piclength-1)*picWidth); } elseif(perIndex==0&&index==piclength-2&&flag==1){ ul.style[direction]="-"+(piclength-1)*picWidth+"px"; target=-((piclength-2)*picWidth); } elseif(perIndex==0){ ul.style[direction]=0+"px"; } else{ target=-(index*picWidth); };
if(flag){ Move(ul,speed,direction,target,function(){ ul.timmerTwo(autoIndex); }); } else{ Move(ul,speed,direction,target,function(){ }); }
setBlack(index); //將index轉為被用過的perIndex perIndex=index; };
functionsetBlack(index){ for(vari=0;i<allA.length;i++){ //使內聯樣式變為空時，顏色為預設色 allA[i].style.backgroundColor=""; }; //將選定的index變為黑色 allA[index].style.backgroundColor="black"; } };
functionMove(obj,speed,attr,target,refunc){ //函式:物件，移動速度，方向，目標座標，返回函式; clearInterval(obj.timmer); //獲取當前座標 console.log("正在執行move方法"); console.log("目標距離:"+target); varnowLocation; nowLocation=parseInt(getComputedStyle(obj,null)[attr]); console.log("move方法中方向:"+attr); varnewLocation=nowLocation;
obj.timmer=setInterval(function(){ //獲得速度並設定移動方向得到新的座標 console.log("已進入timmer函式");
if(target<newLocation){ newLocation=newLocation-speed; } elseif(target>newLocation){ newLocation=newLocation+speed; } else{ newLocation=newLocation; };
obj.style[attr]=newLocation+"px";
if(newLocation==target){ refunc(); clearInterval(obj.timmer); }; },16); }; }