您好,登錄后才能下訂單哦!
這篇“js如何實(shí)現(xiàn)文字無縫輪播”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“js如何實(shí)現(xiàn)文字無縫輪播”文章吧。
所用到的知識(shí)點(diǎn):
innerHTML 獲取或設(shè)置某個(gè)對(duì)象的內(nèi)容
scrollTop 滾動(dòng)條滾動(dòng)的距離,此屬性是系統(tǒng)內(nèi)置定義好的
offsetHeight 獲取或設(shè)置對(duì)象的高度
setInterval() 開啟定時(shí)器
clearInterval() 關(guān)閉定時(shí)器
html布局結(jié)構(gòu)如下:
其中con2是用來儲(chǔ)存復(fù)制con1內(nèi)容的容器
<body> <div id="mooc"> <!-- 頭部 --> <h4 id="moocTitle">最新課程<a href="#" target="_self">更多>></a> </h4> <!-- 頭部結(jié)束 --> <!-- 中間 --> <div id="moocBox"> <ul id="con1"> <li><a href="#">1.學(xué)會(huì)html5 絕對(duì)的逆襲(案例)</a><span>2013-09-18</span></li> <li><a href="#">2.tab頁(yè)面切換效果(案例)</a><span>2013-10-09</span></li> <li><a href="#">3.圓角水晶按鈕制作(案例)</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分頁(yè)頁(yè)碼制作(案例)</a><span>2013-11-06</span></li> <li><a href="#">6.導(dǎo)航條菜單的制作(案例)</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.如何實(shí)現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li> </ul> <ul id="con2"> </ul> </div> <!-- 中間結(jié)束 --> </div> </body>
css樣式如下:
<style> body { font-size: 12px; line-height: 24px; text-algin: center; /* 頁(yè)面內(nèi)容居中 */ } * { margin: 0px; padding: 0px; /* 去掉所有標(biāo)簽的marign和padding的值 */ } ul { list-style: none; /* 去掉ul標(biāo)簽?zāi)J(rèn)的點(diǎn)樣式 */ } 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; /* 讓新聞內(nèi)容靠左 */ } /* 頭部樣式 */ #moocTitle { height: 62px; overflow: hidden; /* 這個(gè)一定要加上,內(nèi)容超出的部分要隱藏,免得撐高頭部 */ 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; /* 這個(gè)一定要加上,內(nèi)容超出的部分要隱藏,免得撐高底部結(jié)構(gòu) */ } /* 中間樣式 */ #moocBox { height: 144px; width: 335px; margin-left: 25px; margin-top: 10px; overflow: hidden; /* 這個(gè)一定要加,超出的內(nèi)容部分要隱藏,免得撐高中間部分 */ } #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初始化對(duì)象滾動(dòng)條的距離,此屬性是系統(tǒng)標(biāo)準(zhǔn)化的 //獲取第一個(gè)ul對(duì)象 var con1=document.getElementById('con1'); //獲取第二個(gè)ul對(duì)象 var con2=document.getElementById('con2'); //將第一個(gè)ul對(duì)象里的內(nèi)容給第二個(gè)ul對(duì)象 con2.innerHTML=con1.innerHTML; //封裝函數(shù) 用來判斷滾動(dòng)條的距離與盒子高度的關(guān)系 function scrollUp(){ if(area.scrollTop>=con1.offsetHeight){ area.scrollTop=0; }else{ area.scrollTop++; } } //聲明定時(shí)器 var timer=null; //解決暴力用戶 在開啟定時(shí)器之前最好先清除一下定時(shí)器 clearInterval(timer); //開始定時(shí)器 timer=setInterval(scrollUp,50); //為對(duì)象設(shè)置綁定鼠標(biāo)滑過 area.onmouseover=function(){ clearInterval(timer); } //為對(duì)象綁定鼠標(biāo)劃出 area.onmouseout=function(){ timer=setInterval(scrollUp,50); } </script>
以上就是關(guān)于“js如何實(shí)現(xiàn)文字無縫輪播”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。