如何利用JS實現新聞自動輪播效果,現在看看具體代碼:這是原生js實現新聞輪播效果,且附詳細注釋
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="input"> <button id="btn">插入</button> <ul id="box"></ul> <script> // 定義數組 var news = ['111111111111','2222222222222222222','33333333333333']; // 獲取元素 var input = document.getElementById('input'); var btn = document.getElementById('btn'); var box = document.getElementById('box'); // 把原有的新聞顯示在頁面中 carousel(); // 把渲染結構的內容封裝為一個函數 function carousel(){ // 定義一個空字符串 var str = ''; // 遍歷數組,把數組里面的每一個值都重復拿出來添加到 li 標簽里再賦值給str news.forEach(function(item){ str +=`<li>${item}</li>`; }); // 把 str 的內容給到 box 結構里 box.innerHTML = str; } // 點擊添加的時候 把 用戶輸入的內容添加到數組中,再次渲染結構 btn.onclick = function(){ // 為了良好的用戶體驗 輸入框中的值不能為空 if(!input.value){ // 彈出提示框 alert('輸入框不能為空'); // 這里 return 是中斷循環的意思 return; } // 把內容添加到數組中 news.unshift(input.value); // 頁面中新聞只能為5條,如果超過5條,把5條之后的數據刪除 if(news.length>5){ // 只截取頁面最新的5條新聞 news.splice(5); } // 調用 渲染結構 carousel(); // 插入新聞完成后輸入框賦空 input.value = ''; } /* 【1】間隔執行函數,每隔多少時間去執行一次函數,這里 1000 指的是 1s setInterval(function(){ 你需要執行的代碼 },1000) */ // 設置定時器 新聞的滾動切換(把數組中的最后一條數據 截取出來放入數組中第一條),再次循環 渲染結構 setInterval(function(){ // pop() 在刪除數組的最后一個元素 把刪除的數據賦值給res var res = news.pop(); // unshift() 在數組的最前面添加一個元素 news.unshift(res); // 調用函數,再次渲染結構 carousel(); // 定時,時長設置為2s },2000); </script> </body> </html>
效果:
初始:
如下圖所示,當插入數據(因為我們設置了輪播效果,所以新聞會一直滾動):
插入大于5條:
我們看到插入只顯示數組的最新的五條數據,后面的為什么會不顯示那?極有可能是插入的數據類型為整型,因為在遍歷數組的時候跑到前面位置所以不顯示
以上就是IS實現新聞輪播的全部內容,歡迎大家更多關注后續內容。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/127797.html
寫在前面 當大多數人Vue理解的爐火純青的時候,你應該思考怎么讓vue頁面騷氣起來,下面就我個人在接觸Vue兩年的時間里,在實際工作中門戶網站在前端頁面交互應用和技巧,炒幾道小菜給大家分享一哈,我把它封裝成一個項目vue-portal-webUI(github源碼),不敢說是UI,但也是各種常見常遇到的情景吧,看懂代碼需要一些vue、axios、es6、scss基礎、數據基本上是mock,功能和場...
摘要:訂閱事件,在其中做更新數據的操作需要特殊注意的是,自定義事件的訂閱和觸發可以不在同一個頁面的腳本環境中完成,只需要保證自定義事件的觸發在訂閱之后即可。 本節教程將介紹如何用DeviceOne簡單而高效的完成一個新聞頁面。 導入項目數據模板分離MVVM模型自定義事件展示新聞九宮格展示將要學習的demo效果圖如下所示showImg(https://segmentfault.com/img/...
摘要:訂閱事件,在其中做更新數據的操作需要特殊注意的是,自定義事件的訂閱和觸發可以不在同一個頁面的腳本環境中完成,只需要保證自定義事件的觸發在訂閱之后即可。 本節教程將介紹如何用DeviceOne簡單而高效的完成一個新聞頁面。 導入項目數據模板分離MVVM模型自定義事件展示新聞九宮格展示將要學習的demo效果圖如下所示showImg(https://segmentfault.com/img/...
摘要:本人博客正式地址騰訊新聞中心的首頁改版啦,歡迎訪問。這次新聞首頁的改版,是從零開始寫的一個新頁面。除要聞頁卡外,其他頁卡的新聞均是通過的方式獲取的。總結新頁面上線后,還會有很多后續的功能需要添加。 本人博客:http://www.xiabingbao.com 正式地址:http://www.xiabingbao.com/news/2016/05/16/qq-news-revision ...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 631·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 521·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2178·2023-01-20 08:28