這個輪播圖的JS動態代碼：
var currentNum = 0;
var changeBgOfObj = document.getElementById("Carousel-BgDiv");
var circleObjId = "circle";
var imgName = "";
var imgUrl = "";
//---------點擊廣告上的頁碼點換圖片-----------------
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;
//遍歷所有的小圓點 讓被點擊的小圓點背景變紅 其他的全都變黑
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";
}
}
}
//---------------點擊箭頭換圖片-----------------
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";
}
}
}
//定時器調用的方法，調用這個方法換圖片
function autoChangeBg(){
if(currentNum == 6){
currentNum = 1;
}else{
currentNum++;
}
//拼接圖片的名字
imgName = String(currentNum + 10);
//拼接圖片地址
imgUrl = "url(img/" + imgName + ".png) no-repeat"
//拿到要換圖片的對象
changeBgOfObj.style.background = imgUrl;
//遍歷所有小圓點讓當前圖片對應的小圓點變紅 其他的變黑
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);
通過點擊左右兩個灰色的按鈕來觸發onclickChangeBg(id)函數切換圖片。
