第js實現(xiàn)文字無縫輪播本文實例為大家分享了js實現(xiàn)文字無縫輪播的具體代碼，供大家參考，具體內容如下

所用到的知識點：

innerHTML獲取或設置某個對象的內容

scrollTop滾動條滾動的距離，此屬性是系統(tǒng)內置定義好的

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.如何實現(xiàn)“新手引導”效果/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初始化對象滾動條的距離，此屬性是系統(tǒng)標準化的

//獲取第一個ul對象

varcon1=document.getElementById('con1');

//獲取第二個ul對象

varcon2=document.getElementById('con2');

//將第一個ul對象里的內容給第二個ul對象

con2.innerHTML=con1.innerHTML;

//封裝函數(shù)用來判斷滾動條的距離與盒子高度的關系

functionscrollUp(){

if(area.scrollTop=con1.offsetHeight){

area.scrollTop=0;

}else{

area.scrollTop++;

}

}

//聲明定時器

vartimer=null;

//解決暴力用戶在開啟定時器之前最好先清除一下定時器

clearInterval(timer);

//開始定時器

timer=setInterval(scrollUp,50);

//為對象設置綁定鼠標滑過