淡入淡出轮播图效果

第一版本有很多限制，特以此做记录以待日后优化。模仿支付宝首页轮播图https://www.alipay.com/

<script>
$(function(){
    var i=1;
    var time;
     $("#J-slide").hover(function(){
        time=window.clearInterval(time);//清除自动播放
    },function(){
        time=setInterval(function (){    
            $("#J-slide li").fadeOut(500);
            $("#J-slide li[name='"+i+"']").fadeIn(500);    
            $("#J-slide-number a").removeClass("slide_number_active");
            $("#J-slide-number a[name='a_"+i+"']").addClass("slide_number_active");
            i++;
            if(i==4)i=1;
            
        },5000);
    }).trigger("mouseleave"); 
    
     $("#J-slide-number a").click(function(){
         $("#J-slide-number a").removeClass("slide_number_active");
         $(this).addClass("slide_number_active");
         
         var n=$(this).attr("name");
         n=n.substr(2,1);
         $("#J-slide li").fadeOut(500);
         $("#J-slide li[name='"+n+"']").fadeIn(500);    
     })

})
</script>

 

<!--切换图片-->
    <ul class="J_slide" id="J-slide">
           
        <li style="z-index:100" name="1">
            <div class="bg bg1">123123</div>
        </li>
        <li name="2">
            <div class="bg bg1">34534534</div>
        </li>
        <li name="3">
            <div class="bg bg1">56786</div>
        </li>
        
        
    </ul><!--J_slide-->
    <!--切换图片-->
    
    <!--焦点按钮-->
    <div class="slide_number_box">
        <div class="slide_number" id="J-slide-number">
             <a class="slide_number_active" name="a_1" href="javascript:void(0)" >1</a>
            <a name="a_2" href="javascript:void(0)" >2</a>
            <a name="a_3" href="javascript:void(0)" >3</a>             
        </div><!--slide_number-->
    </div><!--slide_number_box-->
    <!--焦点按钮-->

 

来源：https://www.cnblogs.com/nidakun/archive/2013/01/30/2883418.html