可点击轮播图

let imgarr = ['img.alicdn.com/imgextra/i2…', 'img.alicdn.com/imgextra/i4…', 'gtms01.alicdn.com/tps/i1/TB1r…', 'img.alicdn.com/imgextra/i3…'] //定义一个数组放图片

    let num = 0




    //点击效果
    $('ul  li').click(function () {
        $(this).addClass('on').siblings().removeClass('on')  //on需要在CSS样式里写好


        let index = $(this).index()    //获取当前的点击的索引
        $('img').attr('src', imgarr[index])   //索引会是 0.1.2.3 



        num = index     //这句话是为了 点击之后让图片继续从点击图片开始走 而不是从头开始走
    })


    //自动播放效果

    let dsq = setInterval(fn, 2000)
    function fn() {
        if (num > imgarr.length - 1) { num = 0 }
        $('ul  li').eq(num).addClass('on').siblings().removeClass('on')
        $('img').attr('src', imgarr[num])
        num++
    }

    //鼠标经过效果
    $('img').hover(function () { clearInterval(dsq) },
        function () { dsq = setInterval(fn, 2000) })
        //既有轮播 也包含点击效果