js實現(xiàn)新聞輪播效果

更新時間：2022年07月13日 15:37:16 作者：混度思緒

這篇文章主要為大家詳細介紹了js實現(xiàn)新聞輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)新聞輪播效果的具體代碼，供大家參考，具體內(nèi)容如下

原生js實現(xiàn)新聞輪播效果，附詳細注釋

<!DOCTYPE html>
<html lang="en">
<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>
? ? ? ? // 定義數(shù)組
? ? ? ? var news = ['111111111111','2222222222222222222','33333333333333'];
? ? ? ? // 獲取元素
? ? ? ? var input = document.getElementById('input');
? ? ? ? var btn = document.getElementById('btn');
? ? ? ? var box = document.getElementById('box');
? ? ? ? // 把原有的新聞顯示在頁面中
? ? ? ? carousel();
? ? ? ? // 把渲染結構的內(nèi)容封裝為一個函數(shù)
? ? ? ? function carousel(){
? ? ? ? ? ? // 定義一個空字符串
? ? ? ? ? ? var str = '';
? ? ? ? ? ? // 遍歷數(shù)組,把數(shù)組里面的每一個值都重復拿出來添加到 li 標簽里再賦值給str
? ? ? ? ? ? news.forEach(function(item){
? ? ? ? ? ? ? ? str +=`<li>${item}</li>`;
? ? ? ? ? ? });
? ? ? ? ? ? // 把 str 的內(nèi)容給到 box 結構里
? ? ? ? ? ? box.innerHTML = str;
? ? ? ? }
? ? ? ? // 點擊添加的時候 把 用戶輸入的內(nèi)容添加到數(shù)組中，再次渲染結構
? ? ? ? btn.onclick = function(){
? ? ? ? ? ? // 為了良好的用戶體驗 輸入框中的值不能為空
? ? ? ? ? ? if(!input.value){
? ? ? ? ? ? ? ? // 彈出提示框
? ? ? ? ? ? ? ? alert('輸入框不能為空');
? ? ? ? ? ? ? ? // 這里 return 是中斷循環(huán)的意思
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? // 把內(nèi)容添加到數(shù)組中
? ? ? ? ? ? news.unshift(input.value);
? ? ? ? ? ? // 頁面中新聞只能為5條，如果超過5條，把5條之后的數(shù)據(jù)刪除
? ? ? ? ? ? if(news.length>5){
? ? ? ? ? ? ? ? // 只截取頁面最新的5條新聞
? ? ? ? ? ? ? ? news.splice(5);
? ? ? ? ? ? }
? ? ? ? ? ? // 調用 渲染結構
? ? ? ? ? ? carousel();
? ? ? ? ? ? // 插入新聞完成后輸入框賦空
? ? ? ? ? ? input.value = '';
? ? ? ? }
? ? ? ? /*
? ? ? ? 【1】間隔執(zhí)行函數(shù),每隔多少時間去執(zhí)行一次函數(shù)，這里 1000 指的是 1s
? ? ? ? ? ? ? ? setInterval(function(){
? ? ? ? ? ? ? ? ? ? 你需要執(zhí)行的代碼
? ? ? ? ? ? ? ? },1000)
? ? ? ? */

? ? ? ? // 設置定時器 ?新聞的滾動切換（把數(shù)組中的最后一條數(shù)據(jù) 截取出來放入數(shù)組中第一條），再次循環(huán) 渲染結構
? ? ? ? setInterval(function(){
? ? ? ? ? ? // pop() 在刪除數(shù)組的最后一個元素 ?把刪除的數(shù)據(jù)賦值給res
? ? ? ? ? ? var res = news.pop();
? ? ? ? ? ? // unshift() 在數(shù)組的最前面添加一個元素
? ? ? ? ? ? news.unshift(res);
? ? ? ? ? ? // 調用函數(shù)，再次渲染結構
? ? ? ? ? ? carousel();
? ? ? ? ? ? // 定時，時長設置為2s
? ? ? ? },2000);
? ? </script>
</body>
</html>

效果：

初始：