簡易輪播器

html

<div class="">
            <div class="container-image">
                <img class="banner-img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3721486562,2041162213&fm=27&gp=0.jpg" >
                <img class="banner-img" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3377153203,4138457011&fm=26&gp=0.jpg" >
                <img class="banner-img" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2018040178,138482694&fm=26&gp=0.jpg" >
            </div>

            <div class="tab">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>

css

.container-image{
            position: relative;
            display: flex;
            height: 500px;
            justify-content: center;
            align-items:center;
        }
        .container-image img{
            position: absolute;
            display: block;
            margin:auto;
            opacity: 0;
            transition: opacity 2s;
        }
        .tab{
            text-align: center;
        }
        .tab span{
            display: inline-block;
            width:10px;
            height:10px;
            background: #000;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
        }

js

/*
        *   輪播圖  輪播圖的淡入淡出效果能夠經過給樣式添加transition：opacity:2s;2s表明時間
        * */
        $(".tab span").css("background","red");
        //獲取各個節點
        let imageList = document.getElementsByClassName("banner-img");
        imageList[0].style.opacity = 1;
        let tabList = document.getElementsByClassName("tab")[0].getElementsByTagName("span");
        let number = 0;
        for(let i = 0;i < tabList.length; i++){
            tabList[i].index = i;
            tabList[i].onclick = function () {
                //遍歷全部的img元素，opacity設置爲0，點擊的俄元素設置爲1
                console.log("this是" + this.index)
                console.log("i是" + i)
                console.log("timeId" + timeId)
                clearInterval(timeId);
                for(let j = 0;j < tabList.length;j++){
                    imageList[tabList[j].index].style.opacity = 0;
                }
                number = tabList[i].index;
                imageList[tabList[i].index].style.opacity = 1;
                timeId = setInterval(Time,3000);
            }
        }
        function Time() {
            number++;
            console.log(number)
            if(number < 3){
                for(let j = 0;j < tabList.length;j++){
                    imageList[tabList[j].index].style.opacity = 0;
                }
                imageList[number].style.opacity = 1;
                console.log("第一個" + number)
            }else{
                number = 0;
                for(let j = 0;j < tabList.length;j++){
                    imageList[tabList[j].index].style.opacity = 0;
                }
                imageList[number].style.opacity = 1;
                console.log("第二個"  + number)
            }
        }
        clearInterval(timeId);  //在調用定時器要先清除定時器，否則會讓定時器一直疊加，使得輪播速度愈來愈快
        var timeId = setInterval(Time,3000);

微信公衆號：天字一等