<style type="text/css">
*{
	margin:0px;
	padding:0px;
}
#wrap{
	width:890px;
	height:124px;
	position:relative;
	overflow:hidden;
}
#wrap ul{
	height:108px;
	position:absolute;
	top:0px;
	left:0px;
}
#wrap li{
	list-style:none;
	float:left;
}
#wrap span{
	display:block;
	width:178px;
	height:16px;
	text-align:center;
	line-height:16px;
}
</style>
</head>

<body>
<div id="wrap">
	<ul>
	    <li><img src="images/1.jpg"><span>wjr</span></li>
        <li><img src="images/2.jpg"><span>dlm</span></li>
        <li><img src="images/3.jpg"><span>dxd</span></li>
        <li><img src="images/4.jpg"><span>wlx</span></li>
        <li><img src="images/1.jpg"><span>fxm</span></li>
	</ul>
</div>
<script type="text/javascript" >
	var oDiv = document.getElementById("wrap");
	var oUl = oDiv.getElementsByTagName("ul")[0];
	var oLis = oDiv.getElementsByTagName("li");
	var timer = null;
	
	oUl.innerHTML += oUl.innerHTML;
	oUl.style.width = ( oLis[0].offsetWidth * oLis.length ) + "px";
	
	function slide (){        //使用scrollLeft实现
		oDiv.scrollLeft = (oDiv.scrollLeft + 5);
		timer = setTimeout(arguments.callee,100);
		if ( oDiv.scrollLeft > oUl.offsetWidth / 2){
			oDiv.scrollLeft = 0 ;
		}
	}
	
	timer = setTimeout(slide,100);
	oUl.onmouseover = function(){
		
		clearTimeout(timer);
	}
	oUl.onmouseout = function(){
		timer = setTimeout(slide,100);
	}

	function slide (){           //相对定位和offsetLeft实现，将此函数替换上面slide函数即可
		oUl.style.left = (oUl.offsetLeft - 5) +"px";
		timer=setTimeout(arguments.callee,100);
		if ( oUl.offsetLeft < -oUl.offsetWidth / 2){
			oUl.style.left = 0 + "px";
		}
	}
</script>	
</body>