js基础之B站案例——轮播图代码以及思想

代码运行效果：​ 完整HTML代码：[jcode](https://code.juejin.cn/pen/7251798939064598543)

注：一些自认为重要的代码思想以及知识点：

``` function genghuan(){
            // 重新定义一个轮换，比较麻烦
            // console.log(arr[i])
            // img.src = arr[i].url
            // span.innerHTML = arr[i].title
            // document.querySelector('ul .gl').classList.remove('gl')
            // document.querySelector(`.text li:nth-child(${i+1})`).classList.add('gl')
            // text.style.backgroundColor = arr[i].color
            // console.log(i)
            // i++
            // if(i==9)
            // i=0
 
            // 直接调用右侧按钮功能，操作简便
            img2.click()
        }

排他思想：

``` // 排他思想
            document.querySelector('ul .gl').classList.remove('gl')
            document.querySelector(`.text li:nth-child(${i+1})`).classList.add('gl')
            text.style.backgroundColor = arr[i].color
            console.log(i)

开关定时器：

```// 经过和离开大盒子，开关定时器功能
        let timer = setInterval(genghuan,3000)
        big.addEventListener('mouseenter',function(){
            clearInterval(timer)
            console.log('关闭了');
        })
        big.addEventListener('mouseleave',function(){
            timer = setInterval(genghuan,3000)
            console.log('开启了');
        })