欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

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.onmou网站优化ver=function(){//鼠标放在地区内停止

  clearInterval(myFunction);

  }

  dome.onmou网站优化ut=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_classppullia{

  text-decoration:none;

  color:#333333;

  }

  #book_classppullia:hover{

  text-decoration:underline;

  }

  </style>

  </head>

  <body>

  <pid="book_class">

  <pid="dome">

  <pid="dome1">

  <ulid="express">

  <li><ahref="#">·2010考研英语大纲到货75折...</a></li>

  <li><ahref="#">·权威定本四大名著(人民文...</a></li>

  <li><ahref="#">·讲述历史权威唐德刚先生国...</a></li>

  <li><ahref="#">·袁伟民与体坛风云:实话实...</a></li>

  <li><ahref="#">·大家台湾这类年:哄动两岸...</a></li>

  <li><ahref="#">·畅销教辅推荐:精品套书50...</a></li>

  <li><ahref="#">·2010版法律硕士联考大纲75...</a></li>

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

  <li><ahref="#">·2009年小孩最喜欢的书</a></li>

  <li><ahref="#">·弗洛伊德作品甄选集59折</a></li>

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

  </p>

  <pid="dome2"></p>

  </p>

  </p>

  <!----------预防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.onmou网站优化ver=function(){

  clearInterval(myFunction);

  }

  dome.onmou网站优化ut=function(){

  myFunction=setInterval(moveTop,speed);

  }

  </script>

  </body>

  </html>


本文转载自中文网


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.dgznd.com.cn 关注: 时间:2022-05-01 18:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/HTML/HTMLjichu/20220501/14023.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧