jquery連續滾動

　　本文非常詳細的講解在jquery裡實作圖檔或文字的連續循環滾動的方法。

連續循環滾動是我們在網頁開發中經常要用到的特效，在jquery裡，我們要實作文字或圖檔的連續循環滾動是非常簡單的。出處：http://www.aijquery.cn

第一步：HTML結構和CSS樣式：

<style type="text/css"> 
#byc ul li {width:100px;height:80px} 
</style>
<div id="byc" class="mx-auto" style="width:402px;height:80px;overflow:hidden;border:1px solid red">
<ul class="list-unstyled">
<li class="border float-left">Lorem ipsum</li>
<li class="border float-left">Phasellus iaculis</li>
<li class="border float-left">Nulla volutpat</li>
<li class="border float-left">Nulla </li>
<li class="border float-left">volutpat</li>
</ul>
</div>      

結構很簡單，div是展示的架構界面，根據自己的網頁，設定好寬高，超出的部分隐藏，圖檔或文字資訊全放在ul清單裡，CSS樣式的話，讓li浮動，并且設定好li的寬高就行。

第二步：編寫JS代碼：

function GunDong(v){
var $ul=v.find("ul");
var _w=$ul.find("li").eq(0).outerWidth();
$ul.width(_w*$ul.find("li").length);
this.Go=function(){
$ul.animate({marginLeft:"-"+_w},1000,function(){
$ul.css({marginLeft:0}).find("li:first").appendTo($ul);
});
};
this.autoScroll=function(){
var self=this;
var g=setInterval(self.Go,1500);
$ul.mouseover(function(){
clearInterval(g);
}).mouseout(function(){
g=setInterval(self.Go,1500);
});
}
}      

代碼很簡單，共四個過程：

更改ul的寬度，這是為了讓超出顯示範圍的圖檔或文字并排成一排，這樣滾動的時候才會“連續性”；

設定滾動一次的動作函數Go;用jquery裡的animate很容易實作，如果要向右滾動，上面代碼裡改成marginRight；

通過setInterval來循環調用上面的動作函數Go，實作圖檔或文字的連續滾動；

通過jquery裡的mouseover和mouseout來設定當滑鼠放上去和移開時，停止滾動和繼續滾動；

第三步：調用代碼并運作：

var a=new GunDong($("#byc"));
a.autoScroll();