Jquery焦點圖實例程式碼_jquery

本文實例講述了Jquery焦點圖實例程式碼。分享給大家供大家參考。具體如下：

對於許多建站的朋友來講，焦點圖並不陌生，一般的企業站，門戶站都會用到焦點圖。我們平常在寫html程式碼的時候，很多人為了省時省力，對於焦點圖都是在網路上下載一些人家寫好的程式碼，直接套上去即可，很多時候我自己也是這樣來的。因為一個焦點圖有html佈局，css樣式調試和最關鍵的 javascript語句的編寫。這些都是一個很麻煩的過程。

今天我就以實例講解，手把手教你如何寫Jquery焦點圖。 Jquery是js封裝的框架，讓js的文法變得簡單，很多知名網站都在用這個框架。這裡星仔為了文法的簡單，讓大部分網友能看懂，也引用Jquery框架。

長話短說，我直接貼出原始碼，和對應的註解。具體程式碼如下：

複製程式碼 程式碼如下:

 
身體>

$(文檔).ready(function(){
 
var num=$(".bigpic li").length;//取得焦點圖的數量
var fwidth=$(".bigpic li").width();//取得每個焦點圖的寬度
var sec=4000;//時間切換間隔
 
var btn = '

• 1
';
var btnend = '

';
for(i=2;i'我 '';};
btn = btnend;
if(num == 1){btn = null};
$(".focus").append(btn);//自動根據焦點圖數，新增切換按鈕，如果一張圖片則不顯示切換按鈕。
 
$(".bigpic").css("width",fwidth*num);//設定大圖集合的寬度，主要是所有焦點圖寬度的和。
 
$(".btn li").bind("滑鼠懸停",function(){
  $(this).addClass("on").siblings().removeClass("on");
  var i=$(".btn li").index(this);var marginL=fwidth*i;
  $(".bigpic").animate({"left":-marginL},500);}
);//滑鼠指向按鈕，焦點圖切換到對應位置，按鈕樣式改變。 mouseover是滑鼠經過時，這裡也可以改成點擊，透過點擊切換焦點圖。
 
picTimer = setInterval(時間設定,秒); //指定秒後執行一次timeset函數。
函數時間設定(){
  var j = $(".btn li").index($(".on"));//取得目前焦點圖的位置，即class為on的序號。
  var timew = fwidth*(j 1);
if(j == num-1){$(".btn li").eq(0).addClass("on").siblings().removeClass("on");$(".bigpic").動畫({"left":0},500);}
else{$(".btn li").eq(j 1).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left": -timew},500);};
                  };
 
$(".focus").mouseover(function(){clearInterval(picTimer);});
$(".focus").bind("mouseout",function(){picTimer = setInterval(timeset,sec);}
);//當滑鼠指向焦點圖或切換按鈕時，滑鼠清除，即無法執行自動切換，滑鼠離開則恢復自動切換。
 
})
腳本>

希望本文對大家介紹的 jQuery 程式設計有所幫助。