<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ 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;}
</style>
<script>
window.οnlοad=function()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var speed=2;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
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';
}
var timer=setInterval(move,30)
oDiv.οnmοuseοver=function()
{
clearInterval(timer)
}
oDiv.οnmοuseοut=function()
{
timer=setInterval(move,30)
}
document.getElementsByTagName('a')[0].οnclick=function()
{
speed=-2
}
document.getElementsByTagName('a')[1].οnclick=function()
{
speed=2
}
}
</script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><a href=""><img src="images/1.jpg" alt=""></a></li>
<li><a href=""><img src="images/2.jpg" alt=""></a></li>
<li><a href=""><img src="images/3.jpg" alt=""></a></li>
<li><a href=""><img src="images/4.jpg" alt=""></a></li>
</ul>
</div>
</body>
</html>
扫一扫
4279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
