这个轮播图的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)函数切换图片。
网友评论