轮播图

//定义图片数组
let imgs = ["img1.jpg",            "img2.jpg",            "img3.jpg",            "img4.jpg",            "img5.jpg"]
let i = 0 //用于表示当前显示的下标

//生成li按钮
for(let i=0;i<imgs.length;i++){
    let li = $('<li/>')
    if(i===0){
        li.addClass('active')
    }
    $('.btn').append(li)
}
//li按钮点击事件
$('.btn li').click(function(){
    //先清空定时器
    clearInterval(timer)  
    //将当前li的位置值，赋给i
    i = $(this).index()
    change()  //调用切换方法
    //再开启定时器
    run()       
})
//左箭头点击事件
$('.left_arrow').click(function(){
    //先清空定时器
    clearInterval(timer)  
    //i减1，要判断i不能小于0
    if(--i<0) i = imgs.length-1
    change()  //调用切换方法
    //再开启定时器
    run()       
})

//右箭头点击事件
$('.right_arrow').click(function(){
    //先清空定时器
    clearInterval(timer)  
    //i加1，要判断i不能大于数组的长度
    if(++i>=imgs.length) i = 0
    change()  //调用切换方法
    //再开启定时器
    run()       
})
//切换方法
function change(){
    //切换图片
    $('.img').attr('src',imgs[i])
    //切换按钮样式
    $('.btn li').eq(i).addClass('active').siblings('.active')
        .removeClass('active')
}
let timer = null  //定义一个变量，用于接收定时器
//开启定时器的方法
function run(){
    timer = setInterval(() => {
        //i每次加1，如果i的值超过了数组的长度，从0开始
        if(++i>=imgs.length) i = 0
        change()  //调用切换方法
    }, 3000);
}
run()  //开启定时器