js實現文字無縫輪播

3403771864 發布于2022-09-15 22:21 / 595人閱讀

　　知識點介紹：

　　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>

以上就是全部內容，請大家多多關注。

GPU云服務器云服務器 js無縫輪播 js實現輪播原生JS實現輪播文字無縫滾動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127739.html

js、jQuery實現文字上下無縫輪播、滾動效果

摘要：因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。原生JS版本文字上下無縫輪播 * { margin: ...

zhangwang 2019-08-22 18:24 評論0 收藏0
js、jQuery實現文字上下無縫輪播、滾動效果

摘要：因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。原生JS版本文字上下無縫輪播 * { margin: ...

PAMPANG 2019-08-02 10:48 評論0 收藏0
js、jQuery實現文字上下無縫輪播、滾動效果

摘要：因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。原生JS版本文字上下無縫輪播 * { margin: ...

focusj 2019-08-30 15:53 評論0 收藏0
原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

MSchumi 2019-08-02 16:03 評論0 收藏0
原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

hatlonely 2019-08-22 18:09 評論0 收藏0