<body> <div id="scroll-external"> <ul id="scroll-inter"> <li><a href="#">大漠孤烟直，长河落日圆1</a></li> <li><a href="#">大漠孤烟直，长河落日圆2</a></li> <li><a href="#">大漠孤烟直，长河落日圆3</a></li> <li><a href="#">大漠孤烟直，长河落日圆4</a></li> <li><a href="#">大漠孤烟直，长河落日圆5</a></li> <li><a href="#">大漠孤烟直，长河落日圆6</a></li> <li><a href="#">大漠孤烟直，长河落日圆7</a></li> <li><a href="#">大漠孤烟直，长河落日圆8</a></li> <li><a href="#">大漠孤烟直，长河落日圆9</a></li> <li><a href="#">大漠孤烟直，长河落日圆10</a></li> <li><a href="#">大漠孤烟直，长河落日圆11</a></li> <li><a href="#">大漠孤烟直，长河落日圆12</a></li> </ul> </div> </body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#scroll-external{
position: relative;
208px;
height: 188px;
overflow: hidden;
}
ul{
border: 1px solid #00ff00;
position: absolute;
}
ul li{
list-style: none;
}
</style>
<script type="text/javascript"> onload=function(){ var oDiv = document.getElementById("scroll-external"); var oUl = document.getElementById("scroll-inter"); var aLi = document.getElementsByTagName("li"); var scrollUp = null; oUl.innerHTML += oUl.innerHTML;//将UL的内部HTML代码累加一次 oUl.style.height = aLi[0].offsetHeight * aLi.length + "px";//实际高度等于任意一个LI高度与其数量相乘，注意需要指定单位。 scrollUp = setInterval(function(){ if(oUl.offsetTop < -oUl.offsetHeight/2){//当UL向上滚动到两倍高度的一半时将其拉回纵坐标为0的位置，重新滚动 oUl.style.top = "0"; } oUl.style.top = oUl.offsetTop - 4 + "px"; },100); oDiv.onmouseover = function(){ clearInterval(scrollUp); } oDiv.onmouseout = function(){ scrollUp = setInterval(function(){ if(oUl.offsetTop < -oUl.offsetHeight/2){ oUl.style.top = "0"; } oUl.style.top = oUl.offsetTop - 4 + "px"; },100); } } </script>
如果制作图片轮播向左偏移的效果，可以照葫芦画瓢，只需将height改为top等等