简单轮播图（新手都会懂）

需求：一个banner，带左右按钮，底部一个小的圆形图（有几个banner的小圆圈），没有任何事件的时候，是自动滚动的；

分解流程：

1. 既然是自动轮播，肯定会用到定时器，还需要一个变量去存轮播到第几个图了；
2. 先写自动轮播功能，用到setInterval()，每1秒钟，i 的值也+1，相应的第几个轮播图也跟随着变化( eq(i) ),小圆圈也等同，注意 i 的值不能大于轮播图的数量，当走到最后一张图的时候（if判断），重新给 i 赋值；
3. 左右按钮，对于左按钮，先暂停定时器，然后 i-- ；判断当 i 减到-1时，i 重新赋值=4；右按钮也相似；
4. 当鼠标滑到小圆圈中时，获取所滑到小圆圈的索引，把索引赋值给 i ，再展示第 i 张banner；离开小圆圈的时候，重新启动定时器；

<div id="dlunbo">
        <div id="igs">
            <div class="ig"><img src="img/1.jpg" /></div>
            <div class="ig"><img src="img/2.jpg" /></div>
            <div class="ig"><img src="img/3.jpg" /></div>
            <div class="ig"><img src="img/4.jpg" /></div>
            <div class="ig"><img src="img/5.jpg" /></div>
        </div>
        <ul id="tabs">
            <li class="bg"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="btn btn1" >&lt;</div>
        <div class="btn btn2">&gt;</div>
    </div>

js中 我封装了2个函数（如有看不懂请私信我）

var i=0;
var timer;
$('.ig').eq(0).show().siblings().hide(); //默认情况下 第一张图片展示，其他隐藏
cursor();//自动轮播

//左按钮
$('.btn1').click(function(){
    clearInterval(timer);
    i--;
    if(i==-1){
        i=4;
    }
    begin();
})  
 
//右按钮
$('.btn2').click(function(){
    clearInterval(timer);
    i++;
    console.log(i);
    if(i==5){
        i=0;
    }
    begin();
})  

//小圆圈滑进滑出
$('#tabs li').hover(function(){
    clearInterval(timer);
    i=$(this).index();
    begin();
},function(){
    cursor();
})

//展示第i个
function begin(){
     $('.ig').eq(i).show().siblings().hide();
    $('#tabs li').eq(i).addClass('bg').siblings().removeClass();
}

//定时器
function cursor(){
    timer=setInterval(function(){
        i++;
        if(i==5){
            i=0;
        }
        begin();
    },1000)
}

 效果图：