原生javascript效果：无缝滚动

<style type="text/css">
#con {width:400px; padding:10px; margin:20px auto; text-align:center; border:1px solid #ccc;}
#con .roll {width:400px; height:100px; position:relative; overflow:hidden; margin-bottom:10px;}
#con ul {position:absolute;}
#con ul li {float:left; width:120px; height:100px; padding-left:10px;}
#con ul li a {display:block; width:120px; height:100px; background:#333; color:#fff;}
#con span {display:inline-block; *display:inline; *zoom:1; height:30px; line-height:30px; padding:0 10px; background:#ccc;}
</style>

　　

js：

<script type="text/javascript">
window.onload=function () {
        var oCon = document.getElementById('con');
        var oUl = oCon.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var aSpan = oCon.getElementsByTagName('span');
        var iSpeed = -2;
        var timer;
        
        oUl.innerHTML += oUl.innerHTML;
        oUl.style.width = aLi.length*aLi[0].offsetWidth+'px';
        
        function goRoll() {
                timer = setInterval(function() {
                        oUl.style.left = oUl.offsetLeft+iSpeed+'px';
                        if(oUl.offsetLeft<-oUl.offsetWidth/2) {
                                oUl.style.left = '0px';
                        } else if(oUl.offsetLeft>=0) {
                                oUl.style.left = -oUl.offsetWidth/2+'px';
                        }
                }, 30);
        }
        
        oUl.onmouseover = function() {clearInterval(timer);};
        oUl.onmouseout = function() {goRoll();};
        
        aSpan[0].onmouseover = function() {iSpeed = -2};
        aSpan[1].onmouseover = function() {iSpeed = 2};
        
        goRoll();
};
</script>

　　

 

 

html：

<div id="con">
                <div class="roll">
                        <ul>
                                <li><a href="javascript:;">mming<br />无缝滚动演示<br />001</a></li>
                                <li><a href="javascript:;">mming<br />无缝滚动演示<br />002</a></li>
                                <li><a href="javascript:;">mming<br />无缝滚动演示<br />003</a></li>
                                <li><a href="javascript:;">mming<br />无缝滚动演示<br />004</a></li>
                        </ul>
                </div>
                <span><< 向左</span>
                <span>向右 >></span>
 </div>