jQuery可自動播放動畫焦點圖插件Koala

Koala是一款簡單而實用的jQuery焦點圖幻燈片插件，焦點圖不只能夠在播放圖片的時候讓圖片有淡入淡出的動畫效果，並且圖片能夠自動播放。該jQuery焦點圖的每一張圖片均可以設置文字描述，並浮動在圖片之上。因爲其簡單的配置，這款jQuery焦點圖能夠很方便地與你的網站相結合。 

使用方法

引入核心文件

<link href="css/jqcool.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/koala.min.1.5.js"></script>

構建html代碼

< div  id = "fsD1"  class = "focus"  style = "margin-left:400px" >  

     < div  id = "D1pic1"  class = "fPic" >  

         < div  class = "fcon"  style = "display: none;" >

             < a   href = "http://www.jqcool.net/" >< img  src = "images/01.jpg"  style = "opacity: 1; " ></ a >

             < span  class = "shadow" >< a   href = "#" >紅三代葉明子太廟辦盛典 白色羽毛裝高貴動人</ a ></ span >

         </ div >

         

         < div  class = "fcon"  style = "display: none;" >

             < a   href = "http://www.jqcool.net/" >< img  src = "images/02.jpg"  style = "opacity: 1; " ></ a >

             < span  class = "shadow" >< a   href = "#" >佟大爲登封面表情搞怪 成熟男人也是天真男孩</ a ></ span >

         </ div >

         

         < div  class = "fcon"  style = "display: none;" >

             < a   href = "http://www.jqcool.net/" >< img  src = "images/03.jpg"  style = "opacity: 1; " ></ a >

             < span  class = "shadow" >< a   href = "#" >21歲出櫃超模巴釐自曝搞笑全裸照</ a ></ span >

         </ div >

         

         < div  class = "fcon"  style = "display: none;" >

             < a   href = "http://www.jqcool.net/" >< img  src = "images/04.jpg"  style = "opacity: 1; " ></ a >

             < span  class = "shadow" >< a   href = "#" >金喜善出道21年 皮膚白皙越長越「嫩」！</ a ></ span >

         </ div >    

     </ div >

     < div  class = "fbg" >  

     < div  class = "D1fBt"  id = "D1fBt" >  

         < a  href = "javascript:void(0)"  hidefocus = "true"  target = "_self"  class = "" >< i >1</ i ></ a >  

         < a  href = "javascript:void(0)"  hidefocus = "true"  target = "_self"  class = "" >< i >2</ i ></ a >  

         < a  href = "javascript:void(0)"  hidefocus = "true"  target = "_self"  class = "current" >< i >3</ i ></ a >  

         < a  href = "javascript:void(0)"  hidefocus = "true"  target = "_self"  class = "" >< i >4</ i ></ a >  

     </ div >  

     </ div >  

     < span  class = "prev" ></ span >   

     < span  class = "next" ></ span >    

</ div >

 

 

寫入JS初始化插件

Qfast.add( 'widgets' , { path:  "js/terminator2.2.min.js" , type:  "js" , requires: [ 'fx' ] });  

     Qfast( false ,  'widgets' ,  function  () {

         K.tabs({

             id:  'fsD1' ,    //焦點圖包裹id  

             conId:  "D1pic1" ,   //** 大圖域包裹id  

             tabId: "D1fBt" ,  

             tabTn: "a" ,

             conCn:  '.fcon' ,  //** 大圖域配置class       

             auto: 1,    //自動播放 1或0

             effect:  'fade' ,    //效果配置

             eType:  'click' ,  //** 鼠標事件

             pageBt: true , //是否有按鈕切換頁碼

             bns: [ '.prev' ,  '.next' ], //** 先後按鈕配置class                          

             interval: 3000   //** 停頓時間  

         }) 

     })