无缝轮播图

向左走向右走

window.onload = function(){

// var div1 = document.getElementById('div1');

// setInterval(function(){

// div1.style.left = div1.offsetLeft + 14 + 'px';

// },100)

var oDiv = document.getElementById('div1');

var oUl = document.getElementsByTagName('ul')[0];

var aLi = document.getElementsByTagName('li');

var speed = -4;//控制速度

var timer;//计时器变量

oUl.innerHTML += oUl.innerHTML;//复制了一份

oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';//计算ul的寛

function move(){

if (oUl.offsetLeft < -oUl.offsetWidth/2) {

oUl.style.left = '0';

}

if(oUl.offsetLeft > 0){

oUl.style.left = -oUl.offsetWidth/2 + 'px';

}

oUl.style.left = oUl.offsetLeft + speed + 'px';//每100毫秒向右移动-4px

}

timer = setInterval(move,100)

div1.onmouseover = function(){

clearInterval(timer);

}

div1.onmouseout = function(){

timer = setInterval(move,100);

}

document.getElementsByTagName('a')[0].onclick = function(){

speed=-4;

}

document.getElementsByTagName('a')[1].onclick = function(){

speed=4;

}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容