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

        
![](img/nav_00.jpg)
        
![](img/nav_01.jpg)
        
![](img/nav_02.jpg)
        
![](img/nav_03.jpg)
        
![](img/nav_04.jpg)
        
![](img/nav_05.jpg)
    
    
<
    
>
    

        
1
        
2
        
3
        
4
        
5
        
6
    

  *{  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)
        }

    })