轮播图

用js写出的轮播图效果

<script>
var i=0;//设定一个全局变量
lunbo();//首先执行一遍轮播图函数，否则页面加载时没有图片
function lunbo(){
    var a = document.getElementById("lunbotu");
    var b = document.getElementsByClassName("anniu");
    a.innerHTML = '<img src="../img/'+(i+1)+'.png">';
    //循环用于轮播图片时，下面的按钮也同时轮播
    for(var j=0;j<b.length;j++){
        b[j].style.backgroundColor = "#888888";//首先让所有按钮背景变成灰色
    }
    b[i].style.backgroundColor = "white";//使按钮数组中下标为i的按钮变成白色
    i++;//递增
    //总共三张图片，所以当i递增到3时初始为0，重新递增
    if(i==3){
        i=0;
    }
}
    //设置间隔定时函数
var c = setInterval(function(){lunbo()},1000);
    //这个函数是点击按钮使按钮颜色改变并使图片改变
function aa(obj){
    clearInterval(c);//首先清除之前的时间间隔，否则会出现图片变换间隔不规律的情况
    var a = document.getElementById("lunbotu");
    var b = document.getElementsByClassName("anniu");
    a.innerHTML = '<img src="../img/'+ obj +'.png">';//3个按钮的参数设置为1，2，3
    i= +obj-1;//全局变量等于参数减去1，这样就能使两个函数相互联系起来
    for(var j=0;j<b.length;j++){
        b[j].style.backgroundColor = "#888888";;
    }
    b[i].style.backgroundColor = "white";
    i++;
    if(i==3){
        i=0;
    }
    //重新设定时间间隔，点击按钮后开始计算
    setTimeout(function(){
        c = setInterval(function(){lunbo()},1000);
    },0);
}
</script>

与之类似

function fun2(obj){
    var a = document.getElementsByTagName("span");
    if(a[obj].style.backgroundColor = "#489BE5"){
        for(var i=0;i<4;i++){
            a[i].style.backgroundColor = "white";
            a[i].style.color = "black";
        }
    }
    a[obj].style.backgroundColor = "#489BE5";
    a[obj].style.color = "white";
}

这段代码实现点击标签变色，点其他标签之前的变色标签颜色变回