轮播图2-轮播图代码的书写

<div class="banner"> </div>
    <script src="./02move.js"></script>
    <script>
        let oBanner = document.querySelector('.banner');
        const arr = [
            { id: 1, width: 500, height: 333, url: '1.jpg' },
            { id: 2, width: 500, height: 333, url: '2.jpg' },
            { id: 3, width: 500, height: 333, url: '3.jpg' },
            { id: 4, width: 500, height: 333, url: '4.jpg' },
            { id: 5, width: 500, height: 333, url: '5.jpg' }
        ];
        let index = 1;
        let oUl;
        let oOl;
        let oDiv;
        let oUllis;
        let oOllis;
        let liWidth;
        let time;
        let res = true;
        // 调用自动生成页面函数
        setPage();
        autoLoop();
        mouseMove();
        setClick();
       hidden();
    //    动态生成页面
        function setPage() {
            oUl = document.createElement('ul');
            oOl = document.createElement('ol');
            oDiv = document.createElement('div');
            let oUlLiStr = '';
            let oOlLiStr = '';

            arr.forEach(function (item, key) {
                oUlLiStr += `<li><img src="./images/${item.url}" alt=""></li>`;
                oOlLiStr += key === 0 ? `<li class="active" num=${key} name="olli"></li>` : `<li num=${key} name='olli'></li>`
            })
            oUl.innerHTML = oUlLiStr;
            oOl.innerHTML = oOlLiStr;
            oDiv.innerHTML = `<a href="Javascript:;" name="left">&lt;</a><a href="Javascript:;" name="right">&gt;</a>`;
            oBanner.appendChild(oUl);
            oBanner.appendChild(oOl);
            oBanner.appendChild(oDiv);
            oUllis = oUl.querySelectorAll('li');
            oOllis = oOl.querySelectorAll('li');
            liWidth = oUllis[0].offsetWidth;
            const oFirstClone = oUllis[0].cloneNode(true);
            const oLastClone = oUllis[arr.length - 1].cloneNode(true);
            oUl.appendChild(oFirstClone);
            oUl.insertBefore(oLastClone, oUllis[0]);
            oUl.style.width = (arr.length + 2) * liWidth + 'px';
            oUl.style.left = -liWidth + 'px'
        }
        // 自动轮播函数
        function autoLoop() {

            time = setInterval(function () {
                // 防止过快点击
                if (res) {
                    res = false;
                }
                else {
                    return;
                }
                index++;
                setFocusStyle();
                move(oUl, { left: -liWidth * index }, loopEnd)
            }, 3000)
        }
        // 轮播函数结束时,调用的函数
        function loopEnd() {
            if (index === arr.length + 2 - 1) {
                index = 1;
            }else if(index===0){
                index=arr.length;
            }
            oUl.style.left = -liWidth * index + 'px';
            res = true;
        }
        // 焦点样式的改变
        function setFocusStyle() {
            oOllis.forEach(function (item, key) {
                item.classList.remove('active');
            })
            if (index === arr.length + 2 - 1) {
                oOllis[0].classList.add('active');
            }
            else if (index === 0) {
                oOllis[arr.length - 1].classList.add('active');
            }
            else {
                oOllis[index - 1].classList.add('active')
            }
        }

        // 鼠标移入移出
        function mouseMove() {
            oBanner.addEventListener('mouseenter', function () {
                clearInterval(time);
            });
            oBanner.addEventListener('mouseleave', function () {
                autoLoop();
            })
        }
        // 添加点击事件
        function setClick() {
            oBanner.addEventListener("click", function (e) {

                if (e.target.getAttribute('name') === 'left') {
                    if (res) {
                        res = false;
                    } else {
                        return;
                    }
                    index--;
                    setFocusStyle();
                    move(oUl, { left: -index * liWidth }, loopEnd);
                }
                else if (e.target.getAttribute('name') === 'right') {
                    if (res) {
                        res = false;
                    } else {
                        return;
                    }
                    index++;
                    setFocusStyle();
                    move(oUl, { left: -index * liWidth }, loopEnd);

                }
                else if (e.target.getAttribute('name') === 'olli') {
                    if (res) {
                        res = false;
                    } else {
                        return;
                    }
                    index = Number(e.target.getAttribute('num'))+1;
                    setFocusStyle();
                    move(oUl, { left: -index * liWidth }, loopEnd);

                }
            })
        }
        // 
        function hidden(){
            // 给documnent添加浏览器显示状态监听
            document.addEventListener('visibilitychange',function(){
            //  如果浏览器显示的状态是hidden
                if(document.visibilityState==='hidden'){
                    // 证明当前浏览器隐藏最小化
                    // 清除定时器
                  clearInterval(time);
              }
            //   如果浏览器显示状态描述的是visible
              else if(document.visibilityState==='visible'){
                // 证明当前浏览器显示
                // 再次调用自动轮播函数 
                autoLoop();
              }
            })
        }