發布一款JavaScript焦點圖組件

【導讀】焦點圖在網站中應用並不少見。該焦點圖將js控置邏輯與UI部份分離,有興趣的朋友可以試試.

【樣本1】

• 1
• 2
• 3
• 4
• 5

【樣本2】

• 圖片1...
• 圖片2...
• 圖片3...
• 圖片4...
• 圖片5...

【樣本3】

 

【說明】
   樣本1與樣本2為同一組件(animation1.js),樣本3的切換模示與之前不同，因此在之前的基礎上修改為animation2.js.兩圖均支援自動切換模式.

【參數說明】

  公用部份:

   scrollcontrol:滾動的容器(元素id) .
   width:橫向滾動一屏的距離;
   height:縱向滾動一屏的距離;
   isLR:標識橫向滾動or縱向滾動(lr|tb)
   mode:滾動模式(slow[減速]|fast[加速]|stand[恒速])
   freq:setInterval的第二個參數,設定該參數控置移動時的頻率.
   rv:與mode協同工作.能夠影響捲動速度,不同的mode,設定rv的意義不一樣，可不用設定.
   auto:標識是否自動滾動
   autotime:自動滾動間隔,毫秒為單為,預設值3000

animation1.js 其它參數:

   defindex:第一次顯示焦點圖的索引號,預設0

   smallbtn:一個(元素)數組:[btn1,btn2,btn3],用來切換不同的頁

   cls:(string或function),如果是string,滑鼠經過smallbtn中按鈕時,會將該字串做為樣式名附加在(滑鼠經過的)按鈕上.如果是一個function,滑鼠經過smallbtn中按鈕時,會觸發該函數.並且傳入兩個整型參數(lstIndex,curIndex),提供外圍擴充.

   start:一個事件,當開始切換焦點時觸發.有兩個參數(lstIndex,curIndex)

   stop:一個事件,當結束滾動時觸發,與start參數一致.

animation2.js 其它參數:

   subcontrol:該容器是滾動內容的父容器,它應該能夠反應出滾動內容的真實寬度或高度(元素id) .

   leftbtn:控置往左移動的按鈕(元素id)

   rightbtn:控置往右移動的按鈕(元素id)

   beforefirst:一個事件，滾動到最左端時觸發,有一個布爾型別參數(auto)，標識是自動滾動，還是點擊觸發.

   afterend:一個事件,滾動到最右邊觸發,參數與beforefirst一致.

 

【工作原理】

    無論左右滾動，或者上下滾動,都是通過scrollLeft,scrollTop控置的.因此請確保 scrollcontrol 有足夠的滾動空間.

【範例程式碼】

 結構部份

<div class = "center" id = "appliymain"><!--js控置該容器的scrollLeft,scrollTop實現滾動--><div style = "width:9999px" ><!--該部份用來撐足空間--><div class = "content" id = "subcontent"><!--滾動內容部份--></div></div></div>

 調用代碼

圖1,2調用

slide1({length:5,scrollcontrol:"paipaimain",width:470,height:205,isLR:"lr",cls:"hover",mode:"slow",rv:1,freq:15,smallbtn:$(".paipai .nav li").get()})

圖3調用

slide2({scrollcontrol:"appliymain",subcontrol:"subcontent",width:550,auto:true,height:75,isLR:"lr",mode:"slow",rv:1,leftbtn:"applyleft",rightbtn:"applyright",freq:15});

點此下載完整樣本