淡入淡出轮播图效果

第一版本有很多限制，特以此做记录以待日后优化。模仿支付宝首页轮播图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--><!--焦点按钮-->