第一版本有很多限制，特以此做記錄以待日后優化。模仿支付寶首頁輪播圖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

總結

以上是生活随笔為你收集整理的淡入淡出轮播图效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。