基于jq淡入淡出式轮播-简洁版

<ul class="imgS">
        <li>![](img/nav_00.jpg)</li>
        <li>![](img/nav_01.jpg)</li>
        <li>![](img/nav_02.jpg)</li>
        <li>![](img/nav_03.jpg)</li>
        <li>![](img/nav_04.jpg)</li>
        <li>![](img/nav_05.jpg)</li>
    </ul>
    <div class="btn1"><</div>
    <div class="btn2">></div>
    <ol class="tabs">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ol>

  *{  margin:0px;padding:0px;  }
        ul,li,ol{list-style:none;}
        .wrap{ width:1200px;height:350px;position:relative;left:50%;margin-left:-600px;top:100px;}
        .wrap img{width:1200px;height:350px;}
        .imgS li{position:absolute;width:520px;height:280px;}
        .btn1,.btn2{position:absolute;width:34px;height:50px;opacity:0.4;color:#fff;background-color:#000;top:40%;text-align:center;line-height:50px;font-size:30px;cursor:pointer;}
        .btn1{left:0;}
        .btn2{right:0;}
        .tabs{position:absolute;top:85%;left:60%;}
        .tabs li{width:30px;height:30px;background-color:#606;float:left;margin:0px 5px;text-align:center;line-height:30px;border-radius:50%;color:#fff;}
        .tabs .active{background-color:#e4393c;}

 $(function(){
        var $aLi=$(".imgS li");
        var $tabs=$(".tabs li");
        var num=0;
        var timer=null;
        //初始化
        A();
        B();
        //tab hover设置
        $tabs.hover(function(){
            num=$(this).index();
            A();
            clearInterval(timer);
        },function(){
            clearInterval(timer);
            B();
        });
        $(".wrap").hover(function(){
            clearInterval(timer);
        },function(){
            B();
        })
        //上一张
        $(".btn1").click(function(){
            num--;
            num%=$aLi.length;
            A();

        })
        //下一张
        $(".btn2").click(function(){
            num++;
            num%=$aLi.length;
            A();
        })
        function A(){
            $aLi.eq(num).fadeIn(300).siblings().fadeOut(300);
            $tabs.eq(num).addClass("active").siblings().removeClass();
        }
        function B(){
            timer=setInterval(function(){
                num++;
                num%=$aLi.length;
                A();
            },1000)
        }

    })