---

說明

在很多情況下，我們都需要開發廣告輪播圖，當我們進行頁面的功能開發時，采用輪播圖來實現也行，但是很多情況下，我們只需要簡單的控制輪播循環輪播展示即可，所以用jq開開發廣告輪播波，自定義方式比較靈活，而且還簡單，只需要幾行代碼就可以實現廣告輪播。

一、效果圖

實現功能：循環滾動，向上下（左右滾動都可以）滾動，鼠標懸浮時取消滾動。

二、開發代碼

用例：下面開發代碼，廣告向上滾動，左右滾動方法同理。

<style>.nav_box .search{display: none !important;}.div_box{margin-top: 50px;min-height: 600px;width: 100%;}.ad{width: 200px;height: 30px;margin: 0 auto;overflow: hidden;}ul,li,h3{line-height: 30px;cursor: pointer;}
</style><div class="div_box"><div class="ad"><h3 class="fl">[公告]</h3><ul class="fl w_ul"><li><span>這個是新聞廣告1</span></li><li><span>這個是新聞廣告2</span></li><li><span>這個是新聞廣告3</span></li><li><span>這個是新聞廣告4</span></li></ul></div>
</div><script type="text/javascript">var timer_ad = setInterval(roll_ad,1500);$('.w_ul').hover(function(){//懸浮清除定時器clearInterval(timer_ad)},function(){//取消懸浮定時器開啟timer_ad = setInterval(roll_ad,1500);})function roll_ad(){$('.w_ul').animate({//滾動效果marginTop:'-30px',},500,function(){//滾動時長//滾動結束后執行方法$(this).css({marginTop:'0px'}).find('li:first').appendTo($(this));//將位置初始化，然后將第一個數據放到最后面})}	</script>