html+css+javascript实现列表循环滚动示例代码

2020-04-16 21:58:03易采站长站整理

<li><a href=”#”>·我们台湾这些年:轰动两岸…</a></li>
<li><a href=”#”>·畅销教辅推荐:精品套书50…</a></li>
<li><a href=”#”>·2010版法律硕士联考大纲75…</a></li>
<li><a href=”#”>·计算机新书畅销书75折抢购</a></li>
<li><a href=”#”>·2009年孩子最喜欢的书</a></li>
<li><a href=”#”>·弗洛伊德作品精选集59折</a></li>
<!———多复制<li>标签就行了——这里就不多写了———->
</div>
<div id=”dome2″></div>
</div>
</div>
<!———-防止html没有加载完,把javascript代码写在下面———->
<script type=”text/javascript”>
var dome=document.getElementById(“dome”);
var dome1=document.getElementById(“dome1”);
var dome2=document.getElementById(“dome2”);
var speed=50;//设置向上轮动的速度
dome2.innerHTML=dome1.innerHTML;//复制节点
function moveTop(){
if(dome1.offsetHeight-dome.scrollTop<=0){
dome.scrollTop=0;
}else{
dome.scrollTop++;
}
}
var myFunction=setInterval(“moveTop()”,speed);
dome.onmouseover=function(){
clearInterval(myFunction);
}
dome.onmouseout=function(){
myFunction=setInterval(moveTop,speed);
}
</script>
</body>
</html>

3、所的界面如下: