首页 > 代码库 > 原生javascript效果:无缝滚动

原生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>

  

 

原生javascript效果:无缝滚动