JavaScript模擬實現網易雲輪播效果

2022-04-04 10:00:10

1、div寬度直接與瀏覽器介面寬度一致：width:100%

2、怎麼讓圖片在一個絕對定位的盒子中垂直居中顯示？

繼續加絕對定位。然後改變top，和left的值

3、採用外接的js檔案，需要等到頁面載入完畢：window.οnlοad=function(){}

4、新增和移除元素的類名：先獲取DOM物件，然後通過classList.add('current')（裡面不需要加.）和classList.remove()即可新增型別和刪除類名。

5、事件委託：比如有100個li，每個li都有相同的click點選事件，可能我們會用for迴圈的方法，來遍歷所有的li，然後給它們新增事件。這樣會增加dom的互動次數事件委託是利用事件的冒泡原理實現，事件從最深的節點開始，然後逐步向上傳播事件。頁面上有這麼一個節點樹，div>ul>li>a;比如給最裡面的a加一個click點選事件，那麼這個事件就會一層一層的往外執行，執行順序a>li>ul>div。當給最外面的div加點選事件，那麼裡面的ul，li，a做點選事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委託，委託它們父級代為執行事件。

6、js改變元素背景圖url：document.getElementById("元素id").style.backgroundImage="url(圖片路徑)";

7、js實現定時器的暫停與開啟：

var dsq = setInterval(gd,40)；oDiv.οnmοuseοver= function()    //停止定時器實現暫停的效果
{   clearInterval(dsq);   } oDiv.οnmοuseοut= function()      //開啟定時器，實現重啟的效果
{    //setInterval(gd,40);  錯誤的示範當多次點選的時候，因為開闢了很多個定時器，效果就是一直跳動，看起來很像是因為沒有加節流閥的效果。   dsq=setInterval(gd,40);    
//需要再開啟這個定時器，一定要在定時器前面加上你定義的那個定時器的變數名，如果不加的話就會又開啟一個新的定時器然後你上面的那個停止dsq定時器的函數是無法停止這個新的定時器的，當你滑鼠不斷移入移出都會開啟一個新的定時器，多個定時器同時執行相同的動作，這樣相當於你的定時器裡面的時間成倍的減少，效果就是你的定時器越來越快的執行，  
}

<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="41.css" rel="external nofollow" >
    <script src="41.js"></script>
</head>
 
<body>
    <!-- 盒子裡面方圖片，可以通過左右按鈕改變圖片，同步的改變小圓圈的對應。不操作時會自動跳轉圖片-->
    <!-- 1、新增圖片 -->
    <div class="nav">
        <div class="box">
            <div class="img">
                <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="current"><img src="https://p1.music.126.net/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpg?imageView&quality=89" alt=""></a>
                <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src=" https://p1.music.126.net/Q-GYxr6Opgmveo7cTulcOw==/109951167232940234.jpg?imageView&quality=89" alt=""></a>
                <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" > <img src="https://p1.music.126.net/9lvqxXnb-uXiGE0n4ChJiA==/109951167232823192.jpg?imageView&quality=89" alt=""></a>
                <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" > <img src="https://p1.music.126.net/GnAlY92neUdHWfAGwWz_cQ==/109951167232850389.jpg?imageView&quality=89" alt=""></a>
            </div>
 
            <!-- 2、新增左右箭頭 -->
            <div class="right"><img src="right.png" alt=""></div>
            <div class="left"><img src="left.png" alt=""></div>
            <!-- 3、新增下面的小圓圈 -->
            <ul>
 
            </ul>
 
        </div>
 
    </div>
 
 
 
</body>
 
</html>

* {
    margin: 0px;
    padding: 0px;
}
 
.box {
    position: relative;
    width: 1200px;
    height: 500px;
    margin: auto;
}
 
.img {
    width: 1200px;
    height: 500px;
    margin: auto;
    overflow: hidden;
}
 
img {
    width: 100%;
    height: 100%
}
 
.nav {
    width: 100%;
    height: 500px;
    margin-top: 20px;
    /* 這個url地址需要根據img圖片的顯示來改變的 */
    background-image: url(https://p1.music.126.net/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpg?imageView&blur=40x20);
    background-repeat: no-repeat;
    background-size: 100%;
}
 
.right,
.left {
    width: 80px;
    height: 120px;
    position: absolute;
    top: 210px;
    right: -80px;
}
 
.left {
    left: -80px;
}
 
.right img,
.left img {
    position: absolute;
    top: 25px;
    left: 15px;
    width: 50px;
    height: 70px;
}
 
.left:hover,
.right:hover {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
 
ul {
    width: 600px;
    height: 100px;
    position: absolute;
    bottom: -20px;
    left: 340px;
}
 
ul li {
    float: left;
    margin-left: 100px;
    list-style: disc;
    color: rgb(239, 232, 232);
    font-size: 50px;
}
 
ul .there {
    z-index: 2;
    color: rgb(237, 8, 8);
}
 
ul li:hover {
    color: red
}
 
a {
    width: 1200px;
    height: 500px;
    display: none;
}
 
.current {
    display: block;
}

window.onload = function() {
    //定時器,自動改變圖片以及背景圖以及小圓圈
    var timer = window.setInterval(fun, [3000])
 
    function fun() {
        for (i = 0; i < as.length; i++) {
 
            if (as[i].getAttribute('class') == 'current') {
                flag = i
            }
        }
        //如果flag=as.length-1；那麼就讓flag=0的a的類變為current，如果flag<as.length-1,那麼就讓flag+1的a的class變為current
        if (flag == as.length - 1) {
            //排他思想
            for (i = 0; i < as.length; i++) {
                as[i].classList.remove('current')
                lis[i].classList.remove('there')
            }
            as[0].classList.add('current')
            lis[0].classList.add('there')
            e = 0
        }
        if (flag < as.length - 1) {
            for (i = 0; i < as.length; i++) {
                as[i].classList.remove('current')
                lis[i].classList.remove('there')
            }
            as[flag + 1].classList.add('current')
            lis[flag + 1].classList.add('there')
            e = flag + 1
        }
        fn(e)
    }
    timer = setInterval(fun, [3000])
        //點選的時候需要先把定時器關閉
        // 應該時根據img圖片(直接根據a連結吧）的數量來動態生成li
    var as = document.querySelectorAll('a')
    var ul = document.querySelector('ul')
    var nav = document.querySelector('.nav')
    for (i = 0; i < as.length; i++) {
        // 建立元素
        var li = document.createElement('li')
        ul.appendChild(li)
            //新增元素
    }
    //給按鈕新增點選事件
    var flag
    var left = document.querySelector('.left')
    var right = document.querySelector('.right')
    var lis = document.querySelectorAll('li')
    lis[0].classList.add('there')
    console.log(lis);
    left.addEventListener('click', function() {
            window.clearInterval(timer)
                //左邊按鈕按下一次，圖片往左邊變化一張,相當於要獲得當前顯示的a是第幾個
                //對所有的as進行遍歷，看那個a的class類為current，然後獲得這個編號
                //i不能用來索引
                //還要讓對應的li新增there這個類名
            for (i = 0; i < as.length; i++) {
                if (as[i].getAttribute('class') == 'current') {
                    flag = i
                }
            }
            //如果flag=0；那麼就讓flag=as.length的a的類變為current，如果flag>0,那麼就讓flag-1的a的class變為current
            if (flag == 0) {
                //排他思想
                for (i = 0; i < as.length; i++) {
                    as[i].classList.remove('current')
                    lis[i].classList.remove('there')
                }
                as[as.length - 1].classList.add('current')
                lis[as.length - 1].classList.add('there')
                e = as.length - 1
            }
            if (flag > 0) {
                for (i = 0; i < as.length; i++) {
                    as[i].classList.remove('current')
                    lis[i].classList.remove('there')
                }
                as[flag - 1].classList.add('current')
                lis[flag - 1].classList.add('there')
                e = flag - 1
            }
            fn(e)
            timer = setInterval(fun, [3000])
        })
        //類似的新增右邊按鈕的點選事件
    right.addEventListener('click', function() {
            window.clearInterval(timer)
                //左邊按鈕按下一次，圖片往右邊變化一張,相當於要獲得當前顯示的a是第幾個
                //對所有的as進行遍歷，看那個a的class類為current，然後獲得這個編號
                //i不能用來索引
                //還要讓對應的li新增there這個類名
            for (i = 0; i < as.length; i++) {
                if (as[i].getAttribute('class') == 'current') {
                    flag = i
                }
            }
            //如果flag=as.length-1；那麼就讓flag=0的a的類變為current，如果flag<as.length-1,那麼就讓flag+1的a的class變為current
            if (flag == as.length - 1) {
                //排他思想
                for (i = 0; i < as.length; i++) {
                    as[i].classList.remove('current')
                    lis[i].classList.remove('there')
                }
                as[0].classList.add('current')
                lis[0].classList.add('there')
                e = 0
            }
            if (flag < as.length - 1) {
                for (i = 0; i < as.length; i++) {
                    as[i].classList.remove('current')
                    lis[i].classList.remove('there')
                }
                as[flag + 1].classList.add('current')
                lis[flag + 1].classList.add('there')
                e = flag + 1
            }
            fn(e)
            timer = setInterval(fun, [3000])
        })
        //現在再給下面的小圓圈新增點選事件
        //當按下小圓圈的時候獲得this,那麼要獲得是第幾個小圓圈產生事件，需要自定義屬性一個編號。然後用這個編號去設定as[]的類
        //自定義屬性
    for (i = 0; i < lis.length; i++) {
        lis[i].setAttribute('index', i)
    }
    //新增事件,因為要給每個小圓圈新增點選事件，不如直接使用事件委託，將事件監聽器設定再ul上面，利用冒泡原理委託到li上
    ul.addEventListener('click', function(e) { //為了全域性性，直接使用flag
            window.clearInterval(timer)
            flag = (e.target.getAttribute('index'));
            if (flag) {
                for (i = 0; i < as.length; i++) {
                    as[i].classList.remove('current')
                    lis[i].classList.remove('there')
                }
                as[flag].classList.add('current')
                lis[flag].classList.add('there')
            }
            e = flag
            fn(e)
            timer = setInterval(fun, [3000])
        })
        //根據flag的值去改變box的url
    function fn(e) {
        if (e == 0) {
            nav.style.backgroundImage = 'url(https://p1.music.126.net/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpg?imageView&blur=40x20)'
        }
        if (e == 1) {
            nav.style.backgroundImage = 'url(https://p1.music.126.net/Q-GYxr6Opgmveo7cTulcOw==/109951167232940234.jpg?imageView&blur=40x20)'
        }
        if (e == 2) {
            nav.style.backgroundImage = 'url(https://p1.music.126.net/9lvqxXnb-uXiGE0n4ChJiA==/109951167232823192.jpg?imageView&blur=40x20)'
        }
        if (e == 3) {
            nav.style.backgroundImage = 'url(https://p1.music.126.net/GnAlY92neUdHWfAGwWz_cQ==/109951167232850389.jpg?imageView&blur=40x20)'
        }
    }
}

以上就是JavaScript模擬實現網易雲輪播效果的詳細內容，更多關於JavaScript輪播的資料請關注it145.com其它相關文章！

JavaScript模擬實現網易雲輪播效果

熱門文章