首页 > 代码库 > 原生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效果:无缝滚动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。