轮播图

<div id='all'>
        <ul id='uls'>
            <li><img src="./lunbo/30.jpg" alt="" width='100%'></li>
            <li><img src="./lunbo/31.jpg" alt="" width='100%'></li>
            <li><img src="./lunbo/32.jpg" alt="" width='100%'></li>
            <li><img src="./lunbo/33.jpg" alt="" width='100%'></li>
            <li><img src="./lunbo/34.jpg" alt="" width='100%'></li>
        </ul>
        <ul id='dis'>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

 

    //定义下标
    var index = 1;

    var into = null;
    
    function autoRun(){
        //定时器
        into = setInterval(function(){
            //下标累加
            shows(index++);
            // 判断循环
            if(index > 4){
                index = 0;
            }

        },3000)
    }
    autoRun();
    

    function shows(i)
    {
        //获取第一个图片元素
        $('#uls li').eq(i).slideDown();
        $('#uls li').eq(i).siblings().hide();
        //获取圆点的下标显示颜色
        $('#dis li').eq(i).addClass('cur');
        $('#dis li').eq(i).siblings().removeClass('cur');

    }
    shows(0);

    //鼠标放上去 离开
    $('#dis li').hover(function(){

        //获取下标索引
        index = $(this).index();

        //console.log(res);
        shows(index++);

        clearInterval(into);

    },function(){
        //调用运行定时器
        autoRun();
        //判断最后一张移除
        if(index >4){
            index =0;
        }
    })