Roulette chart 2 - writing of roulette chart code

<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;
        //  Call the auto generate page function 
        setPage();
        autoLoop();
        mouseMove();
        setClick();
       hidden();
    //     Dynamically generate pages 
        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'
        }
        //  Auto carousel function 
        function autoLoop() {

            time = setInterval(function () {
                //  Prevent clicking too fast 
                if (res) {
                    res = false;
                }
                else {
                    return;
                }
                index++;
                setFocusStyle();
                move(oUl, { left: -liWidth * index }, loopEnd)
            }, 3000)
        }
        //  At the end of the rotation function , Called function 
        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;
        }
        //  Change of focus style 
        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')
            }
        }

        //  Mouse in and out 
        function mouseMove() {
            oBanner.addEventListener('mouseenter', function () {
                clearInterval(time);
            });
            oBanner.addEventListener('mouseleave', function () {
                autoLoop();
            })
        }
        //  Add click event 
        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(){
            //  to documnent Add browser display status monitoring 
            document.addEventListener('visibilitychange',function(){
            //   If the status displayed by the browser is hidden
                if(document.visibilityState==='hidden'){
                    //  Prove that the current browser hide is minimized 
                    //  Clear timer 
                  clearInterval(time);
              }
            //    If the browser displays a status that describes visible
              else if(document.visibilityState==='visible'){
                //  Prove that the current browser displays 
                //  Call the auto rotation function again  
                autoLoop();
              }
            })
        }