js实现文字无缝轮播

js实现文字无缝轮播

本文实例为大家分享了js实现文字无缝轮播的具体代码,供大家参考,具体内容如下

所用到的知识点:

innerHTML 获取或设置某个对象的内容
scrollTop 滚动条滚动的距离,此属性是系统内置定义好的
offsetHeight 获取或设置对象的高度
setInterval() 开启定时器
clearInterval() 关闭定时器

html布局结构如下:

其中con2是用来储存复制con1内容的容器

<body> <div id="mooc"> <!-- 头部 --> <h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3> <!-- 头部结束 --> <!-- 中间 --> <div id="moocBox"> <ul id="con1"> <li><a href="#">1.学会html5 绝对的逆袭(案例)</a><span>2013-09-18</span></li> <li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li> <li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li> <li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li> <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li> </ul> <ul id="con2"> </ul> </div> <!-- 中间结束 --> </div> </body>

css样式如下:

<style> body {     font-size: 12px;     line-height: 24px;     text-algin: center;        /* 页面内容居中 */ } * {     margin: 0px;     padding: 0px;            /*  去掉所有标签的marign和padding的值  */ } ul {     list-style: none;           /*  去掉ul标签默认的点样式  */ } a img {     border: none;        /*  超链接下,图片的边框  */ } a {     color: #333;     text-decoration: none;     /* 超链接样式 */ } a:hover {     color: #ff0000; } #mooc {     width: 399px;     border: 5px solid #ababab;     -moz-border-radius: 15px;      /* Gecko browsers */     -webkit-border-radius: 15px;   /* Webkit browsers */     border-radius: 15px;     box-shadow: 2px 2px 10px #ababab;     margin: 50px auto 0;     text-align: left;               /* 让新闻内容靠左 */ } /*  头部样式 */  #moocTitle {     height: 62px;     overflow: hidden;  /* 这个一定要加上,内容超出的部分要隐藏,免得撑高头部 */     font-size: 26px;     line-height: 62px;     padding-left: 30px;     background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/     border: 1px solid ##f05e6f;     -moz-border-radius: 8px 8px 0 0;      /* Gecko browsers */     -webkit-border-radius: 8px 8px 0 0;   /* Webkit browsers */     border-radius: 8px 8px 0 0;     color: #fff;     position: relative; } #moocTitle a {     position: absolute;     right: 10px;     bottom: 10px;     display: inline;     color: #fff;     font-size: 12px;     line-height: 24px; } /*  底部样式 */ #moocBot {     width: 399px;     height: 10px;     overflow: hidden;     /* 这个一定要加上,内容超出的部分要隐藏,免得撑高底部结构 */ } /*  中间样式 */ #moocBox {     height: 144px;     width: 335px;     margin-left: 25px;     margin-top: 10px;     overflow: hidden;    /*  这个一定要加,超出的内容部分要隐藏,免得撑高中间部分 */ } #mooc ul li {     height: 24px; } #mooc ul li a {     width: 180px;     float: left;     display: block;     overflow: hidden;     text-indent: 15px;     height: 24px; } #mooc ul li span {     float: right;     color: #999; } </style>

js代码如下:

<script>     var area=document.getElementById('moocBox');     area.scrollTop=0;//scrollTop初始化对象滚动条的距离,此属性是系统标准化的     //获取第一个ul对象     var con1=document.getElementById('con1');     //获取第二个ul对象     var con2=document.getElementById('con2');     //将第一个ul对象里的内容给第二个ul对象     con2.innerHTML=con1.innerHTML;     //封装函数 用来判断滚动条的距离与盒子高度的关系     function scrollUp(){         if(area.scrollTop>=con1.offsetHeight){             area.scrollTop=0;         }else{             area.scrollTop++;         }     }     //声明定时器     var timer=null;     //解决暴力用户 在开启定时器之前最好先清除一下定时器     clearInterval(timer);     //开始定时器     timer=setInterval(scrollUp,50);     //为对象设置绑定鼠标滑过     area.onmouseover=function(){         clearInterval(timer);     }     //为对象绑定鼠标划出     area.onmouseout=function(){         timer=setInterval(scrollUp,50);     } </script>

推荐阅读

    js设置div的边框|怎样给div设置边框

    js设置div的边框|怎样给div设置边框,,1. 怎样给div设置边框1、首先新建一个html文件,输入基本的内容,这里设置一个div,并把它的class设置为de

    js设置样式|js设置样式类

    js设置样式|js设置样式类,,js设置样式    javascript改变CSS样式分为局部和全局,分别如下:  一、局部改变样式    有三种方法:直接

    js用代码实现简单购物车

    js用代码实现简单购物车,,图: 选择所有按钮: 复制代码代码如下所示: 选择 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3

    js设置背景色|js设置颜色

    js设置背景色|js设置颜色,,js设置背景色首先通过js定位到div的子元素,再通过setatteibute方法给属性添加背景色。js设置颜色js改变字体的颜

    Safari调试iOS中的js

    Safari调试iOS中的js,页面,设备,概述对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试Jav

    Bootstrap的js插件之模态框|modal

    Bootstrap的js插件之模态框|modal,模态,饭盒,.modal——指明div元素包裹模态框;.fade——给模态框添加淡入淡出效果;.modal-dialog——包裹

    js默认事件汇总

    js默认事件汇总,事件,表单,默认事件   就是浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。比如在a标签href属性上的跳转,右键

    js获取元素宽度

    js获取元素宽度,内联,样式,js获取元素宽度1、使用内联样式,即直接把CSS写在HTML元素的style属性中<div > </div>复制代码通过以下js代码

    SQLite使用JSON扩展

    SQLite使用JSON扩展,插件,加载,一、介绍 SQLite3.9.0之后的版本,添加了JSON扩展。在表中可以保存JSON类型。实际上SQLite将JSON类型的

    jscript.dll是什么

    jscript.dll是什么,系统,文件,论坛,显示,扫描,修复,  jscript.dll是Microsoft JavaScript脚本支持相关文件。属于: Microsoft JScript系统 DLL

    postgresql中对jsonb的查询及转换

    postgresql中对jsonb的查询及转换,数据,字段,表数据:需要将strata排除,并且过滤info字段中为{}的数据,将jsonb转换成text,替换“,{,}见SQL:sele