html广告轮播+自动播放,js简单的轮播自动播放的实现

Title

//获取显示的盒子

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

//设置图片地址

var imgs = ['./imgs/1.jpg','./imgs/2.jpg','./imgs/6.jpg','./imgs/5.jpg'];

//创建图片盒子

var imgBox = [];

//创建图片元素

var length = imgs.length;

for(var i=0;i

//创建图片

var img = document.createElement('img');

//设置图片来源

img.src = imgs[i];

//设置位置

img.style.position = 'absolute';

//设置大小

img.style.width = '400px';

img.style.height='300px';

//设置左坐标

var imgX = -i*400;

imgBox[i] = {x:imgX,img1:img};

//设置坐标

imgBox[i].img1.style.left = imgBox[i].x+'px';

//把图片元素放到box中

box.appendChild(imgBox[i].img1);

}

//启动动画

setInterval('run()',100);

function run() {

//遍历数组

imgBox.forEach(function (box) {

//取得图片的坐标

// var imgX = box.x;

// imgX = imgX+10;

box.x = box.x+10;

if(box.x>=400)

box.x = -400*(imgBox.length-1);

//更改图片的坐标

box.img1.style.left = box.x+'px';

})

}