<html>
<head>
<title></title>
<style>
*{
margin:0;padding:0;
}
#show{
100%;
height:400px;
overflow:hidden;
}
#content{
height:400px;
}
#content p{
height:400px;
margin:0;
padding:0;
float:left;
position:relative;
overflow:hidden;
}
#content p img{
3000px;
height:400px;
position:absolute;
left:50%;
margin-left:-1500px;
}
</style>
</head>
<body>
<div id="show">
<div id="content"><p><img src="c1.jpg"></p>
<p><img src="c2.jpg"></p>
<p><img src="c3.jpg"></p></div>
</div>
<script type="text/javascript">
var sw=window.screen.width;
var con=document.getElementById("content")
con.style.width=sw*3+"px";
for(var i=0;i<con.children.length;i++){
con.children[i].style.width=sw+"px";
}
function mq(){
document.getElementById("show").scrollLeft+=40;
if(document.getElementById("show").scrollLeft>=sw){
var c=document.getElementById("content");
c.appendChild(c.children[0]);
document.getElementById("show").scrollLeft=0;
clearInterval(i);
setTimeout(ss, 1000);
}
}
function ss(){
i=window.setInterval("mq()", 100);
}
setTimeout(ss, 1000);
</script>
</body>
</html>