js實現新聞輪播效果

原生js實現新聞輪播效果，附詳細註釋

<!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>
        // 定義陣列
        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條：

插入只顯示陣列的最新的五條資料，為什麼第一條插入4510202不顯示呢，這是因為可能插入的資料型別為整型，在遍歷陣列的時候跑到前面位置所以不顯示
在這裡插入圖片描述

js實現新聞輪播效果

JS實現輪播圖效果

js實現輪播圖效果 z-index實現輪播圖

js實現輪播圖效果純js實現圖片自動切換

用js實現輪播圖效果

純js實現輪播圖效果

JS實現輪播圖效果的3種簡單方法

原生js實現輪播圖特效

js實現輪播圖特效

React實現輪播效果

js實現輪播圖

js實現輪播圖製作方法

原生js實現輪播圖例項教程

JS實現輪播圖小案例

用JS實現輪播圖

js實現簡單的無縫輪播效果

js實現新聞輪播效果

JS實現簡單圖片輪播效果

js實現滑動輪播效果

jQuery實現輪播圖效果demo

iOS實現3D卡片式輪播效果

js實現新聞輪播效果

相關推薦