利用html实现图片滑动
的有关信息介绍如下:学网站的同学不容错过的一个有趣的知识
css代码
* {margin: 0;padding: 0;}
#div1 {width: 712px; height: 108px; margin: 100px auto;position: relative;background: red;overflow: hidden;}
#div1 ul {position: absolute;left: 0;top: 0;}
#div1 ul li {float:left;width:178px;height:108px;list-style:none;}
html 代码忌净
<牺绵/body>
javascrip 代码
window.onload=function()
{
var speed=2;
var a=document.getElementById('div1');
var b=a.getElementsByTagName('ul');
var c=b.getElementsByTagName('li');
b.innerHTML=b.innerHTML+b.innerHTML;
b.style.width=c.offsetWidth*c.length+'px';
function move(){
if (b.offsetLeft<-b.offsetWidth/2) {
b.style.left='0'码欧付;
}
if (b.offsetLeft>0) {
b.style.left=-b.offsetWidth/2+'px';
}
b.style.left=b.offsetLeft+speed+'px';
}
var timer=setInterval(move,30);
b.onmouseover=function(){
clearInterval(timer);
};
b.onmouseout=function(){
timer=setInterval(move,30);
};
document.getElementsByTagName('a').onclick=function(){
speed=-2;
}
document.getElementsByTagName('a').onclick=function(){
speed=2;
}
};
最终结果