<div class="all">
    <ul>
        <li class="current">![](img/1.jpg)</li>
        <li>![](img/2.jpg)</li>
        <li>![](img/3.jpg)</li>
        <li>![](img/4.jpg)</li>
        <li>![](img/5.jpg)</li>
    </ul>
    <ol>
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <span class="left"></span>
    <span class="right"></span>
</div>

 *{ padding:0; margin:0; list-style:none; border:0;}
        .all{ width:992px; height:420px; background:yellow; margin:100px auto; position:relative; overflow:hidden;}
        .all ul{ position:relative; z-index:1;}
        .all ul li{ position:absolute; left:0; top:0;}
        .all ul .current{ z-index:10;}
        .all ol{ position:absolute; bottom:10px; right:10px; z-index:2;}
        .all ol li{ width:30px; height:20px; border:1px solid #ccc; float:left; line-height:20px; text-align:center; color:#000; margin-left:10px; cursor:pointer;}
        .all ol .current{ background:#f60;}
        .all span{ width:40px; height:70px; background:url(img/arr.png) 0 0; position:absolute; left:0; top:50%; margin-top:-35px; z-index:11; cursor:pointer;display:none; }
        .all:hover span{display:block;opacity:0.5;}
        .all span:hover{opacity:1;}
        .all .right{ left:auto; right:0; background-position:right 0;}

 $(function(){
        var mytop=100;
        var num=0;
        var speed=1000;
        var timer=null;
        var $Img=$(".all ul li");
        var $tab=$(".all ol li");
        var $prev=$(".all .left");
        var $next=$(".all .right");
        //tab点击的效果
        $tab.click(function(){
            mytop++;
            $(this).addClass("current").siblings().removeClass("current");
            var index=$(this).index();
            $Img.eq(index).css("zIndex",mytop).hide().fadeIn(speed);
            num=index;

        })
        //下一张

        $next.click(function(){
            num++;
            mytop++;
            if(num>=$Img.length){num=0}
            fnCom();
        });
        //上一张
        $prev.click(function(){
            num--;
            mytop++;
            if(num<0){num=$Img.length-1}
            fnCom();
        })
        //自动播放
        timer=setInterval(autoPlay,2000);
        function autoPlay(){
            mytop++;
            num++;
           num%=$Img.length;
            fnCom();
        }
        function fnCom(){
            $Img.eq(num).css("zIndex",mytop).hide().fadeIn(speed);
            $tab.eq(num).addClass("current").siblings().removeClass("current")
        }
        //鼠标悬停设置
        $(".all").hover(function(){
            clearInterval(timer)
        },function(){
          clearInterval(timer);
            timer=setInterval(autoPlay,2000)
        })


    })