JS輪播圖

這個輪播圖的JS動態(tài)代碼:

var currentNum = 0;

var changeBgOfObj = document.getElementById("Carousel-BgDiv");

var circleObjId = "circle";

var imgName = "";

var imgUrl = "";

//---------點(diǎn)擊廣告上的頁碼點(diǎn)換圖片-----------------

function changeBg(num){

// var changeBgOfObj = document.getElementById("Carousel-BgDiv");

currentNum = parseInt(num);

imgName = String(parseInt(num) + 10);

imgUrl = "url(img/" + imgName + ".png) no-repeat";

// alert(imgUrl);

changeBgOfObj.style.background = imgUrl;

//遍歷所有的小圓點(diǎn) 讓被點(diǎn)擊的小圓點(diǎn)背景變紅 其他的全都變黑

for (var i = 1; i <= 6; i++) {

circleObjId = String("circle" + i);

if(i == num){

document.getElementById(circleObjId).style.backgroundColor = "#DC143C";

}else{

document.getElementById(circleObjId).style.backgroundColor = "black";

}

}

}

//---------------點(diǎn)擊箭頭換圖片-----------------

function onclickChangeBg(id){

if(id == "Lbtn"){

if(currentNum == 1){

currentNum = 6;

}else{

currentNum = currentNum - 1;

// alert(currentNum);

}

}

if(id == "Bbtn"){

if(currentNum == 6){

currentNum = 1;

}else{

currentNum = currentNum + 1;

}

}

var StrCurrentNum = String(currentNum + 10);

var bgimageURL = "url(img/" + StrCurrentNum + ".png) no-repeat";

changeBgOfObj.style.background = bgimageURL;

for (var i = 1; i <= 6; i++) {

if(i != currentNum){

document.getElementById("circle"+i).style.backgroundColor = "black";

}else if(i == currentNum){

document.getElementById("circle"+i).style.backgroundColor = "#DC143C";

}

}

}

//定時器調(diào)用的方法,調(diào)用這個方法換圖片

function autoChangeBg(){

if(currentNum == 6){

currentNum = 1;

}else{

currentNum++;

}

//拼接圖片的名字

imgName = String(currentNum + 10);

//拼接圖片地址

imgUrl = "url(img/" + imgName + ".png) no-repeat"

//拿到要換圖片的對象

changeBgOfObj.style.background = imgUrl;

//遍歷所有小圓點(diǎn)讓當(dāng)前圖片對應(yīng)的小圓點(diǎn)變紅 其他的變黑

for (var i = 1; i<= 6;? i++) {

if(i == currentNum){

document.getElementById("circle"+i).style.backgroundColor = "#DC143C";

}else{

document.getElementById("circle"+i).style.backgroundColor = "black";

}

}

}

var play=setInterval("autoChangeBg()",1000);


通過點(diǎn)擊左右兩個灰色的按鈕來觸發(fā)onclickChangeBg(id)函數(shù)切換圖片。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容