<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{margin:0px;padding:0xp;}//默认全局外边距0,内边距0

#div1 {width:800px;height:200px;margin:100px auto;position:relative;background:black;overflow:hidden}//relative相对定位,overflow超出边界隐藏

#div1 ul{border:1px black solid;padding:0px;float:left;width:100%;position:absolute;left:0px;top:0px;}

#div1 ul li {width:200px;height:200px;float:left;;list-style:none;position:relative;font-size:36px;color:white;}

</style>

<script type="text/javascript">

window. ()

{

var oDiv1=document.getElementById('div1');

var oUl=oDiv1.getElementsByTagName('ul')[0];

var aLi=oUl.getElementsByTagName('li');

//增加一个同样的样式,用于滚动替换

        oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

function demo()

{

            //当滚动条滚动了初始内容的宽度时滚动条回到最左端 

if(oUl.offsetLeft<-oUl.offsetWidth/2)

{

oUl.style.left='0';

}

oUl.style.left=oUl.offsetLeft-2+'px';

};

var run=setInterval(demo,30);

       //鼠标放上去暂停移动

oDiv1. ()

{

clearInterval(run);

};

//鼠标离开继续滚动

oDiv1. ()

{

run=setInterval(demo,30);

};

};


</script>

</head>


<body>

<div id="div1">

<ul>

    <li style="background-color:red" >1</li>  

        <li style="background-color:green">2</li>

        <li style="background-color:yellow">3</li>  

        <li style="background-color:blue">4</li>         

</ul>

</div>

</body>

</html>