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

3403771864 發(fā)布于2022-09-21 06:37 / 434人閱讀

　　如何利用JS實現(xiàn)新聞自動輪播效果，現(xiàn)在看看具體代碼：這是原生js實現(xiàn)新聞輪播效果，且附詳細注釋

　　<!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>
　　// 定義數(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)容封裝為一個函數(shù)
　　function carousel(){
　　// 定義一個空字符串
　　var str = '';
　　// 遍歷數(shù)組,把數(shù)組里面的每一個值都重復(fù)拿出來添加到 li 標簽里再賦值給str
　　news.forEach(function(item){
　　str +=`<li>${item}</li>`;
　　});
　　// 把 str 的內(nèi)容給到 box 結(jié)構(gòu)里
　　box.innerHTML = str;
　　}
　　// 點擊添加的時候 把 用戶輸入的內(nèi)容添加到數(shù)組中，再次渲染結(jié)構(gòu)
　　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);
　　}
　　// 調(diào)用 渲染結(jié)構(gòu)
　　carousel();
　　// 插入新聞完成后輸入框賦空
　　input.value = '';
　　}
　　/*
　　【1】間隔執(zhí)行函數(shù),每隔多少時間去執(zhí)行一次函數(shù)，這里 1000 指的是 1s
　　setInterval(function(){
　　你需要執(zhí)行的代碼
　　},1000)
　　*/
　　// 設(shè)置定時器 新聞的滾動切換（把數(shù)組中的最后一條數(shù)據(jù) 截取出來放入數(shù)組中第一條），再次循環(huán) 渲染結(jié)構(gòu)
　　setInterval(function(){
　　// pop() 在刪除數(shù)組的最后一個元素 把刪除的數(shù)據(jù)賦值給res
　　var res = news.pop();
　　// unshift() 在數(shù)組的最前面添加一個元素
　　news.unshift(res);
　　// 調(diào)用函數(shù)，再次渲染結(jié)構(gòu)
　　carousel();
　　// 定時，時長設(shè)置為2s
　　},2000);
　　</script>
　　</body>
　　</html>

　　效果：

　　初始：