事件流实现轮播图

html和css和之前的版本相同

初始化

img = [{ src:'./1_web.jpg', title: '第一张图片' },
    { src: './2_web.jpg', title: '第二张图片' },
    { src: './3_web.jpg', title: '第三张图片' }]

    const list = document.querySelector('ul') //给小圆圈整体加上事件监听
    const lis = document.querySelectorAll('.list .circle')
    const mainContainer = document.querySelector('.mainContainer')
    let timerID = 0
    // 初始化
    const imge = document.querySelector('img')
    imge.src= img[0].src
    imge.title=img[0].title

两侧按钮

 let k=0;
    const rightBtn = document.querySelector('.rightButton')
    rightBtn.addEventListener('click', function () {
        // console.log(11);
        toggle(1)
    })

    //左侧按钮
    const leftBtn = document.querySelector('.leftButton')
    leftBtn.addEventListener('click', function () {
        toggle(0)
    })

下方圆点

list.addEventListener('click',function(e){
        if(e.target.tagName=='DIV'){
            document.querySelector('.list .active').classList.remove('active')
            e.target.classList.add('active')
            // console.dir(e.target);
            k = e.target.dataset.id
            imge.src= img[k].src
            imge.title=img[k].title
        } 
        
    })

自动播放

timerID = setInterval(function(){
        toggle(1)
    },1000)
    mainContainer.addEventListener('mouseenter',function(){
        clearInterval(timerID)
    })
    mainContainer.addEventListener('mouseleave',function(){
        timerID = setInterval(function(){
            toggle(1)
    },1000)
    })

共有函数

function toggle(x){
        lis[k].classList.remove('active')
        x==1?(k==2?k=0:k++):(k==0?k=2:k--)
        imge.src= img[k].src
        imge.title=img[k].title 
        lis[k].classList.add('active')
    }

实现移除之前的，添加现在的active效果