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

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

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

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

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

<!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();
? ? ? ? // 把渲染結(jié)構(gòu)的內(nèi)容封裝為一個(gè)函數(shù)
? ? ? ? function carousel(){
? ? ? ? ? ? // 定義一個(gè)空字符串
? ? ? ? ? ? var str = '';
? ? ? ? ? ? // 遍歷數(shù)組,把數(shù)組里面的每一個(gè)值都重復(fù)拿出來添加到 li 標(biāo)簽里再賦值給str
? ? ? ? ? ? news.forEach(function(item){
? ? ? ? ? ? ? ? str +=`<li>${item}</li>`;
? ? ? ? ? ? });
? ? ? ? ? ? // 把 str 的內(nèi)容給到 box 結(jié)構(gòu)里
? ? ? ? ? ? box.innerHTML = str;
? ? ? ? }
? ? ? ? // 點(diǎn)擊添加的時(shí)候 把 用戶輸入的內(nèi)容添加到數(shù)組中，再次渲染結(jié)構(gòu)
? ? ? ? btn.onclick = function(){
? ? ? ? ? ? // 為了良好的用戶體驗(yàn) 輸入框中的值不能為空
? ? ? ? ? ? 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);
? ? ? ? ? ? }
? ? ? ? ? ? // 調(diào)用 渲染結(jié)構(gòu)
? ? ? ? ? ? carousel();
? ? ? ? ? ? // 插入新聞完成后輸入框賦空
? ? ? ? ? ? input.value = '';
? ? ? ? }
? ? ? ? /*
? ? ? ? 【1】間隔執(zhí)行函數(shù),每隔多少時(shí)間去執(zhí)行一次函數(shù)，這里 1000 指的是 1s
? ? ? ? ? ? ? ? setInterval(function(){
? ? ? ? ? ? ? ? ? ? 你需要執(zhí)行的代碼
? ? ? ? ? ? ? ? },1000)
? ? ? ? */

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

效果：

初始：