javascript-利用定时器实现幻灯片的自动播放

利用定时器完成幻灯片的自动播放。

注意定时器的开和关。

知识点：

[...oLi];ES6剩余运算符

setInterval()定时器

clearInterval()清除定时器

自定义定时器自动执行函数autoPlay()

在自定执行函数中调用tab()图片水平移动函数

自定义图片水平移动函数tab()

oPic.style.transform = "translateX(-" + num * 794 + "px)";

html:

    <div class="banner">
        <ul class="pic-lists">
        </ul>
        <ul class="title-lists">
        </ul>
        <span class="btn prev"><i class="iconfont icon-left"></i></span>
        <span class="btn next"><i class="iconfont icon-right"></i></span>
    </div>

css:

*{
    box-sizing: border-box;
    }
   
    body,
    ul,
    li{
    margin: 0;
    padding: 0;
    }
   
    li{
    list-style: none;
    }
   
    img{
    border: none;
    vertical-align: middle;
    }
   
    .banner{
    position: relative;
    width: 794px;
    height: 476px;
    overflow: hidden;
    margin:20px auto;
    }
    .banner li img{
        width: 794px;
        height: 432px;
    }
   
    .title-lists,
    .pic-lists{
    display: flex;
    transition: 0.2s ease-out;
    }
   
    .title-lists{
    justify-content: space-around;
    background-color: #f5f5f5;
    }
   
    .title-lists{
    height: 44px;
    line-height: 44px;
    }
   
    .title-lists a{
    color: #525252;
    text-decoration: none;
    font-size: 0.875rem;
    }
   
    .title-lists a:hover,
    .title-lists li.active{
    color: #ff6000;
    }
   
    .title-lists li.active{
    color: #ff6000;
    border-bottom: 5px solid #ff6000;
    }
   
    .btn{
    position: absolute;
    width: 40px;
    height: 80px;
    left: 0;
    top: 50%;
    margin-top: -62px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
    transition: 0.2s;
    }
   
    .btn:hover{
    background-color: rgba(0, 0, 0, 0.3)
    }
   
    .btn .iconfont{
    font-size: 1.25rem;
    }
   
    .btn.next{
    right: 0;
    left: auto;
    }

javascript:

 <script>
        // 找对象
        var oDiv = document.querySelector(".banner");
        var oPic = oDiv.querySelector(".pic-lists");
        var oList = oDiv.querySelector(".title-lists");
        var oLi = oList.getElementsByTagName("li");
        var oPrev = oDiv.querySelector(".prev");
        var oNext = oDiv.querySelector(".next");
        // 存放有active的li对象
        var oldLi = null;
        // 定义一个定时器对象
        var timer = null;


        // 初始化值
        var url = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"];
        var title = ["爆款抢购", "彩电狂欢", "新至高补", "智能AI", "起增壕礼"];

        // 初始化结构

        url.forEach(function (item){
            oPic.innerHTML += "<li><a href='#'><img src='" + item + "'></a></li>"

        })
        title.forEach(function (item){
            oList.innerHTML += "<li><a href='#'>" + item + "</a></li>"
        })

        var num = 0;
        var len = url.length;
        var liArr = [...oLi];
        oPic.style.width = 794 * len + "px";
        tab();
        autoPlay();

        // 鼠标经过和移开关闭和启动自动播放
        oDiv.onmouseover = function(){
            clearInterval(timer);
        }
        oDiv.onmouseout = function(){
            autoPlay();
        }

        // 点击上一张下一张切换
        oNext.onclick = function(){
            num++;
            if(num >= len){
                num = 0;
            }
            oldLi.classList.remove("active");
            tab();

        }
        oPrev.onclick = function(){
            num--;
            if(num <= -1){
                num = len - 1;
            }
            oldLi.classList.remove("active");
            tab();
        }
        // 标题点击切换
        liArr.forEach(function (item, index){
            item.onclick = function(){
                num = index;
                oldLi.classList.remove("active");
                tab();
            }
        })

        function tab(){
            oPic.style.transform = "translateX(-" + num * 794 + "px)";
            oLi[num].classList.add("active");
            oldLi = oLi[num];

        }

        // 定时器自动执行
        function autoPlay(){
            timer = setInterval(function(){
                num++;
                if(num >= len){
                    num = 0;
                }
                oldLi.classList.remove("active");
                tab();
            }, 500);
        }
    </script>