使用html+css+javascript实现列表循环滚动，设置时间定时，在规定的时间内替换前一个节点的内容，具体示例如下，感兴趣的朋友可以参考下

说明：设置时间定时，在规定的时间内替换前一个节点的内容 
1、关键代码：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> 

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

复制代码

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>循环滚动信息栏</title> 
<style type="text/css"> 
body{ 
margin:0px; 
padding:0px; 
} 
#express li{ 
height:25px; 
border-bottom:dashed 1px #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:3px solid #999; 
margin-left:auto; 
margin-right:auto; 
margin-top:70px; 
border-radius:5px 5px 5px 5px; 
box-shadow:0px 0px 10px 10px #CECED1; 
} 
#express{ 
margin-left:-30px; 
margin-right:10px; 
margin-bottom:0px; 
margin-top:0px; 
} 
#book_class div div ul li a{ 
text-decoration:none; 
color:#333333; 
} 
#book_class div div ul li a:hover{ 
text-decoration:underline; 
} 
</style> 
</head> 
<body> 
<div id="book_class"> 
<div id="dome"> 
<div id="dome1"> 
<ul id="express"> 
<li><a href="#">·2010考研英语大纲到货75折...</a></li> 
<li><a href="#">·权威定本四大名著（人民文...</a></li> 
<li><a href="#">·口述历史权威唐德刚先生国...</a></li> 
<li><a href="#">·袁伟民与体坛风云：实话实...</a></li> 
<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、所的界面如下： 

http://www.jb51.net/web/127491.html

html+css+javascript实现列表循环滚动示例代码的更多相关文章

  1. DIV+javascript实现首尾相连循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. li列表循环滚动的简单方法,无需插件,简单方法搞定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. UIScrollView 循环滚动，代码超简单

    如今非常多应用里面多多少少都用到了循环滚动,要么是图片.要么是view,或者是其它,我总结一下,写了个demo分享给大家. 先看代码之后在讲原理: 1.创建一个空的项目(这个我就不多说了). 2.加入 ...

  4. 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）

    回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...

  5. Jquery制作--循环滚动列表

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...

  6. javascript 列表定时滚动效果

    HTML结构: <div style="width:200px;height:100px;overflow:hidden;border:1px solid #ddd;margin:20 ...

  7. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  8. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery 实现列表自动滚动循环滚动显示新闻通知

    需求 页面中一个小区域循环滚动展示通知(公告.新闻.活动.图片等),并且鼠标hover时停止滚动并提示,鼠标离开后,继续滚动. 效果图 https://www.iguopin.com/index.ph ...

随机推荐

  1. [知识点]计算几何I——基础知识与多边形面积

    // 此博文为迁移而来,写于2015年4月9日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vxaq.html 1.前言 ...

  2. java中的List记录是否完全匹配方法

    今天要说的是给List分组,然后用Map来封装,可能你看了以后还是有一些模糊. 先看一下项目结构图: User类是一个VO类,主要逻辑还是在MapTestBak上面. 运行效果: 原理图: 1.在st ...

  3. iOS 9之适配ATS（转载）

    iOS 9系统已经出来了,而网络方面的ATS(App Transport Security)特性可以说每个人都要经历.而我这篇博客,就是结合我最近几天的经历,来谈谈从服务器到iOS客户端对ATS的适配 ...

  4. 纪念逝去的岁月——C/C++快速排序

    快速排序 代码 #include <stdio.h> void printList(int iList[], int iLen) { ; ; i < iLen; i++) { pri ...

  5. [LintCode] Sort Integers II 整数排序之二

    Given an integer array, sort it in ascending order. Use quick sort, merge sort, heap sort or any O(n ...

  6. Git分布式项目管理

          Git简介 Git是什么? Git和SVN一样都是一种高效的管理代码的系统. Git是目前世界上最先进的分布式版本控制系统(没有之一). 创建版本库 什么是版本库呢?版本库又名仓库,英文名 ...

  7. SQL 语句调用这个存储过程，生成顺序编码

    一直很讨厌存储过程,没想到今天帮了我大忙啊,或许会因为今天让我慢慢喜欢上存储过程吧,不多说了,切入正题 在使用数据库的时候,难免要在使用过程中进行删除的操作,如果是使用int类型的字段,令其自增长,这 ...

  8. php——用for循环打印半金字塔、金字塔、正方形、倒金字塔、菱形、空心图形等

    1.半金字塔 $n=5; //控制层数 for($i=1;$i<=$n;$i++){ //控制每层的 “*” 数 for($j=1;$j<=$i;$j++){ echo  "*& ...

  9. sql 数据库 初级 个人学习总结（一）

    数据库个人总结(初级)1.增删改查 insert into 表名 values ('条件','条件2') delete from 表名 where 条件 update 表名 set=条件值 where ...

  10. 一个xib钟多个Cell

    在实际开发中,有时候需要在一个xib钟拖几个cell,注意连线过程的object选择,不然出现没反应的现象. 例如: 在下图中,我在一个xib钟创建了五个cell,他们分别是:收货地址.订单信息.支付 ...