首頁 > web前端 > js教程 > 主體

Jquery焦點圖實例程式碼_jquery

WBOY
發布: 2016-05-16 16:30:23
原創
1524 人瀏覽過

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

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

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

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

複製程式碼 程式碼如下:



焦點程式碼由 boyxing.com 提供支援





 
身體>

$(文檔).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 程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板