js实现文字无缝轮播

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

所用到的知识点：

innerHTML获取或设置某个对象的内容

scrollTop滚动条滚动的距离，此属性是系统内置定义好的

offsetHeight获取或设置对象的高度

setInterval()开启定时器

clearInterval()关闭定时器

html布局结构如下：

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

body

divid="mooc"

!--头部--

h3id="moocTitle"最新课程ahref="#"target="_self"更多/a/h3

!--头部结束--

!--中间--

divid="moocBox"

ulid="con1"

liahref="#"1.学会html5绝对的逆袭（案例）/aspan2013-09-18/span/li

liahref="#"2.tab页面切换效果（案例）/aspan2013-10-09/span/li

liahref="#"3.圆角水晶按钮制作（案例）/aspan2013-10-21/span/li

liahref="#"4.HTML+CSS基础课程(系列)/aspan2013-11-01/span/li

liahref="#"5.分页页码制作（案例）/aspan2013-11-06/span/li

liahref="#"6.导航条菜单的制作（案例）/aspan2013-11-08/span/li

liahref="#"7.信息列表制作(案例)/aspan2013-11-15/span/li

liahref="#"8.下拉菜单制作(案例)/aspan2013-11-22/span/li

liahref="#"9.如何实现“新手引导”效果/aspan2013-12-06/span/li

/ul

ulid="con2"

/ul

/div

!--中间结束--

/div

/body

css样式如下：

style

body{

font-size:12px;

line-height:24px;

text-algin:center;

/*页面内容居中*/

margin:0px;

padding:0px;

/*

去掉所有标签的marign和padding的值

*/

list-style:none;

/*

去掉ul标签默认的点样式

*/

aimg{

border:none;

/*

超链接下，图片的边框

*/

color:#333;

text-decoration:none;

/*超链接样式*/

a:hover{

color:#ff0000;

#mooc{

width:399px;

border:5pxsolid#ababab;

-moz-border-radius:15px;

/*Geckobrowsers*/

-webkit-border-radius:15px;

/*Webkitbrowsers*/

border-radius:15px;

box-shadow:2px2px10px#ababab;

margin:50pxauto0;

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,lefttop,leftbottom,color-stop(0,#f05e6f),color-stop(1,#c9394a));/*Saf4+,Chrome*/

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff',endColorstr='#f05e6f',GradientType='0');/*IE*/

border:1pxsolid##f05e6f;

-moz-border-radius:8px8px00;

/*Geckobrowsers*/

-webkit-border-radius:8px8px00;

/*Webkitbrowsers*/

border-radius:8px8px00;

color:#fff;

position:relative;

#moocTitlea{

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;

/*

这个一定要加，超出的内容部分要隐藏，免得撑高中间部分*/

#mooculli{

height:24px;

#moocullia{

width:180px;

float:left;

display:block;

overflow:hidden;

text-indent:15px;

height:24px;

#moocullispan{

float:right;

color:#999;

/style

js代码如下：

script

vararea=document.getElementById('moocBox');

area.scrollTop=0;//scrollTop初始化对象滚动条的距离，此属性是系统标准化的

//获取第一个ul对象

varcon1=document.getElementById('con1');

//获取第二个ul对象

varcon2=document.getElementById('con2');

//将第一个ul对象里的内容给第二个ul对象

con2.innerHTML=con1.innerHTML;

//封装函数用来判断滚动条的距离与盒子高度的关系

functionscrollUp(){

if(area.scrollTop=con1.offsetHeight){

area.scrollTop=0;

}else{

area.scrollTop++;

}

}

//声明定时器

vartimer=null;

//解决暴力用户在开启定时器之前最好先清除一下定时器

clearInterval(timer);

//开始定时器

timer=setInterval(scrollUp,50);

//为对象设置绑定鼠标滑过