html广告轮播+自动播放,web前端之轮播实现自动播放。

*{

padding: 0px;

margin: 0px;

font-family: "微软雅黑", "宋体";

}

body{

position: relative;

}

#box{

overflow: hidden;

position: relative;

width: 600px;

height: 400px;

border-top:3px slateblue solid;

border-bottom: 3px slateblue solid;

top:100px;

margin: auto;

}

#list{

position: absolute;

font-size: 0px;

width:4200px;

z-index: 1;

-webkit-transition: left .2s linear ;

}

#bottom{

position: absolute;

width: 100px;

height:40px;

text-align: center;

line-height: 40px;

/*border: 1px red solid;*/

top: 350px;

z-index: 2;

}

#bottom span{

display:inline-block;

width: 8px;

height: 8px;

border-radius: 8px;

padding:1px;

/*// border: 1px #6F6F6F solid;*/

background: #6F6F6F;

cursor: pointer;

}

#bottom .on{

background: #E6821B;!important;

}

#prev{

display: block;

width: 40px;

height: 40px;

text-align:center;

line-height: 40px;

/*border: 1px red solid;*/

position: absolute;

z-index: 2;

text-decoration: none;

font-size: 35px;

top: 150px;

color:white ;

background:rgba(255,255,255,.2);

-webkit-transition: all .2s linear;

opacity: 0;

}

#box:hover>#prev{

opacity: 1;

}

#prev:hover{

background: rgba(0,0,0,.3);

}

#next{

display: block;

width: 40px;

height: 40px;

text-align:center;

line-height: 40px;

/*border: 1px red solid;*/

position: absolute;

z-index: 2;

text-decoration: none;

font-size: 35px;

top: 150px;

left: 560px;

color:white ;

background:rgba(255,255,255,.2);

-webkit-transition: all .2s linear;

opacity: 0;

}

#box:hover>#next{

opacity: 1;

}

#next:hover{

background: rgba(0,0,0,.3);

}

<

>

window.οnlοad=function(){

var box=document.getElementById("box");

var list=document.getElementById("list");

var bottom=document.getElementById("bottom").getElementsByTagName("span");

console.log(bottom);

var prev=document.getElementById("prev");

var next=document.getElementById("next");

/**

* 封装函数，点击时左右移动，判断是否为最后和最前一张图的位置，调用函数触发

* @param n

*/

function animate(n){

var left=parseInt(list.style.left)+n;

list.style.left=left+"px";

if(left

list.style.left=-600+"px";

}

if(left>-600){

list.style.left=-3000+"px";

}

}

var index=1;

//点击左键

prev.οnclick=function(){

//如果为第一个圆点时，点击后切换到第二个圆点

if(index==1){

index=5;

}else{

index-=1;

}

for(var i=0;i

if(bottom[i].className="on"){

bottom[i].className="";

}

}

bottom[index-1].className="on";

console.log(bottom);

animate(600);

}

//点击右键

next.οnclick=function() {

animate(-600);

//如果为第一个圆点时，点击后切换到最后一个圆点。

if (index ==5) {

index = 1;

} else {

index += 1;

}

//循环每个圆点，如果点击之前为色圆点，改变为无色圆点。

for (var i = 0; i < bottom.length; i++) {

if (bottom[i].className = "on") {

bottom[i].className = "";

}

}

//下一个圆点颜色添加。

bottom[index - 1].className = "on";

//console.log(bottom);

}

//函数封装

function buttom(){

//循环每个圆点，如果点击之前为色圆点，改变为无色圆点。

for(var i=0;i

if(bottom[i].className="on"){

bottom[i].className="";

}

}

//下一个圆点颜色添加。

bottom[index-1].className="on";

//console.log(bottom);

}

//点击小圆点图片切换

var index=1;

for(var i=0;i

bottom[i].οnclick=function(){

if(this.className=="on"){

return;

}

var mydex=parseInt(this.getAttribute("index"));

console.log(mydex);

var dex=-600*(mydex-index);

animate(dex);

index=mydex;

//点击小圆点颜色改变，调用buttom，改变颜色

buttom();

console.log(dex+"dd");

}

}

//实现轮播自动播放

var time;

function play(){

time=setInterval(function(){

next.onclick();

},5000)

function clear(){

time=clearInterval(time);

}

}

box.οnmοuseοver=play();

box.οnmοuseοut=clear();

}