<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul{margin:0;padding:0;}
div{position:relative;width:680px;height:170px;border:1px solid black;margin:10px auto;overflow:hidden;}
ul{position:absolute;left:0;top:0;}
li{width:150px;height:150px;padding:10px;float:left;list-style:none;}
img{width:150px;height:150px;}
</style>
<script>
window.onload = function(){
var oDIV = document.getElementsByTagName('div')[0];
var oUl = oDIV.getElementsByTagName('ul')[0];
var arrLi = oUl.getElementsByTagName('li');
var arrA = document.getElementsByTagName('a'); var timer = null;
var speed = 10;
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = arrLi.length*arrLi[0].offsetWidth+'px';
timer = setInterval(scrollPicture,100) arrA[0].onclick = function(){
speed = -10;
};
arrA[1].onclick = function(){
speed = 10;
}; for(var i=0;i<arrLi.length;i++){
arrLi[i].onmouseover = function(){
clearInterval(timer);
} arrLi[i].onmouseout = function(){
timer = setInterval(scrollPicture,100)
}
}
/*原理：走到一半给拉回来*/
function scrollPicture(){
if(oUl.offsetLeft < -oUl.offsetWidth/2){ //向左走
oUl.style.left = 0;
}else if(oUl.offsetLeft >0){
oUl.style.left = -oUl.offsetWidth/2+'px'; //向右走
}
oUl.style.left = oUl.offsetLeft+speed+'px';
} };
</script>
</head> <body>
<a href="javascript:;"> < </a>
<a href="javascript:;"> > </a>
<div>
<ul>
<li><img src="data:images/1.jpg"></li>
<li><img src="data:images/2.jpg"></li>
<li><img src="data:images/3.jpg"></li>
<li><img src="data:images/4.jpg"></li>
</ul>
</div>
</body>
</html>