欢迎光临
我们一直在努力

html+css+javascript怎么实现列表循环滚动

这篇文章主要介绍了html+css+javascript怎么实现列表循环滚动的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html+css+javascript怎么实现列表循环滚动文章都会有所收获,下面我们一起来看看吧。

  说明:设置时间定时,在规定的时间内替换前一个节点的内容

  1、关键代码:javascript:

  <scripttype="text/javascript">

  vardome=document.getElementById("dome");//获取节点

  vardome1=document.getElementById("dome1");

  vardome2=document.getElementById("dome2");

  varspeed=50;//设置向上轮动的速度

  dome2.innerHTML=dome1.innerHTML;//复制节点关键语句

  functionmoveTop(){

  if(dome1.offsetHeight-dome.scrollTop<=0){//判断内容第一次是否循环完了

  dome.scrollTop=0;

  }else{

  dome.scrollTop++;//否则上移

  }

  }

  varmyFunction=setInterval("moveTop()",speed);//设置时间定时

  dome.onmouseover=function(){//鼠标放在区域内停止

  clearInterval(myFunction);

  }

  dome.onmouseout=function(){

  myFunction=setInterval(moveTop,speed);

  }

  </script>

  2、代码示例:完整代码(可运行)

  <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <htmlxmlns="http://www.w3.org/1999/xhtml">

  <head>

  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

  <title>循环滚动信息栏</title>

  <styletype="text/css">

  body{

  margin:0px;

  padding:0px;

  }

  #expressli{

  height:25px;

  border-bottom:dashed1px#999;

  line-height:20px;

  font-size:12px;

  list-style:none;

  }

  #dome{

  height:305px;

  overflow:hidden;

  margin-top:0px;

  }

  #book_class{

  width:200px;

  height:310px;

  border:3pxsolid#999;

  margin-left:auto;

  margin-right:auto;

  margin-top:70px;

  border-radius:5px5px5px5px;

  box-shadow:0px0px10px10px#CECED1;

  }

  #express{

  margin-left:-30px;

  margin-right:10px;

  margin-bottom:0px;

  margin-top:0px;

  }

  #book_classdivdivullia{

  text-decoration:none;

  color:#333333;

  }

  #book_classdivdivullia:hover{

  text-decoration:underline;

  }

  </style>

  </head>

  <body>

  <divid="book_class">

  <divid="dome">

  <divid="dome1">

  <ulid="express">

  <li><ahref="#">&middot;2010考研英语大纲到货75折…</a></li>

  <li><ahref="#">&middot;权威定本四大名著(人民文…</a></li>

  <li><ahref="#">&middot;口述历史权威唐德刚先生国…</a></li>

  <li><ahref="#">&middot;袁伟民与体坛风云:实话实…</a></li>

  <li><ahref="#">&middot;我们台湾这些年:轰动两岸…</a></li>

  <li><ahref="#">&middot;畅销教辅推荐:精品套书50…</a></li>

  <li><ahref="#">&middot;2010版法律硕士联考大纲75…</a></li>

  <li><ahref="#">&middot;计算机新书畅销书75折抢购</a></li>

  <li><ahref="#">&middot;2009年孩子最喜欢的书</a></li>

  <li><ahref="#">&middot;弗洛伊德作品精选集59折</a></li>

  <!———多复制<li>标签就行了——这里就不多写了———->

  </div>

  <divid="dome2"></div>

  </div>

  </div>

  <!———-防止html没有加载完,把javascript代码写在下面———->

  <scripttype="text/javascript">

  vardome=document.getElementById("dome");

  vardome1=document.getElementById("dome1");

  vardome2=document.getElementById("dome2");

  varspeed=50;//设置向上轮动的速度

  dome2.innerHTML=dome1.innerHTML;//复制节点

  functionmoveTop(){

  if(dome1.offsetHeight-dome.scrollTop<=0){

  dome.scrollTop=0;

  }else{

  dome.scrollTop++;

  }

  }

  varmyFunction=setInterval("moveTop()",speed);

  dome.onmouseover=function(){

  clearInterval(myFunction);

  }

  dome.onmouseout=function(){

  myFunction=setInterval(moveTop,speed);

  }

  </script>

  </body>

  </html>

关于“html+css+javascript怎么实现列表循环滚动”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“html+css+javascript怎么实现列表循环滚动”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云搜网行业资讯频道。

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。