轮播图效果

        let i = 0        let timer;        function changeStyle() {            $('img').eq(i).show().siblings().hide()            $('.indexes li').eq(i).addClass('active').siblings()                .removeClass('active')        }        function run() {            timer = setInterval(() => {                if (++i === 4) i = 0                changeStyle()            }, 2000);        }        run()        $('.indexes li').click(function () {            clearInterval(timer)            i = $(this).index()            changeStyle()            run()        })        $('.arrow.right').click(function () {            clearInterval(timer)            if (++i === 4) i = 0            changeStyle()            run()        })        $('.arrow.left').click(function () {            clearInterval(timer)            if (--i === -1) i = 3            changeStyle()            run()        })

 function changeStyle() {            $('img').eq(i).show().siblings().hide()            $('.indexes li').eq(i).addClass('active').siblings()                .removeClass('active')        } 

$('.indexes li') 获取轮播图的指示栏    eq(i)下标值   addClass('active')给active添加样式  siblings()兄弟元素    removeClass('active')清除样式

function run() {            timer = setInterval(() => {                if (++i === 4) i = 0                changeStyle()            }, 2000);        }        run()

 这一步的意义是 用定时器 每隔两秒钟进行一次     

if(++i===4)i=0 这是如果i等于4的话 那么 i=0  就意思如果img一共有四张图 那么当i===4第四张图的时候 i将=0 返回第一张 进行轮播效果

changeStyle()是上面封装的函数

run()把他调用 以便方便写

$('.indexes li').click(function () {            clearInterval(timer)            i = $(this).index()            changeStyle()            run()        })

轮播图的指示栏的点击效果

clearInterval(timer)当我点击的时候先把轮播效果停止 

i = $(this).index()当我点击某一个指示栏的时候获取对应下标值 然后获得图片

changeStyle()    run()  然后继续进行

 $('.arrow.right').click(function () {            clearInterval(timer)            if (++i === 4) i = 0            changeStyle()            run()        })        $('.arrow.left').click(function () {            clearInterval(timer)            if (--i === -1) i = 3            changeStyle()            run()        })

这是左右两边点击栏

 if (++i === 4) i = 0  这是点击右边 i++ 当i最大加到4的时候 i=0 然后重新返回第一张图

if (--i === -1) i = 3 左边点击i-- 当i减为-1的时候 那么i=3 返回到第四张图