满意答案

html>

轮播图

* {                margin: 0px;                padding: 0px;

}            #lunbotu {                width: 1226px;                height: 460px;                overflow: hidden;                position: relative;                margin: 0px auto;                position: relative;

}            #banner {                height: 460px;                width: 6130px;                position: absolute;                transition: 2s;                left: 0px;

}            #banner img {                float: left;

}            #biao {                position: absolute;                top: 430px;                left: 43%;

}            #biao_1 {                height: 20px;                width: 20px;                border: 1px solid #000;                z-index: 10;                float: left;                list-style: none;                border-radius: 50%;                margin-left: 20px;                text-align: center;                cursor:pointer;

}

var slid = document.getElementById("banner");        //var id = document.getElementById("bt");

var imgwidth = document.getElementsByClassName("m");        var oli=document.getElementsByTagName("li");        //console.log(oli);

//console.log(imgwidth );

var i =0;

auto();

oli[0].style.cssText="background:#ff6700;color:#fff;";        function auto(){

time = setInterval(function(){

i++;            if(i <= 4) {

slid.style.left = slid.offsetLeft - 1226 + "px";

oli[i].style.cssText="background:#ff6700;color:#fff;";

oli[i-1].style.cssText="background:none;color:#000;";

} else {

slid.style.left ="0px";

oli[4].style.cssText="background:none;color:#000;";

oli[0].style.cssText="background:#ff6700;color:#fff;";

i=0;

}            console.log(i);

}, 3000)

}            for(var j=0;j<=4;j++){                //console.log(imgwidth[j].index);

imgwidth[j].index=j;

oli[j].index=j;

oli[j].οnmοuseοver=function(){                this.style.cssText="background:#ff6700;color:#fff;"

this.οnmοuseοut=function(){                    this.style.cssText="background:none;color:#000;"

}

}

oli[j].οnclick=function(){

clearInterval(time);

m=this.index;

slid.style.left=-m*1226+"px";

i=m;

auto();                console.log(i);

}

}

00分享举报