JQuery使用插件实现轮播

留下 方便以后看

Koala是一款简单而实用的jQuery焦点图幻灯片插件，焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果，而且图片可以自动播放。该jQuery焦点图的每一张图片都可以设置文字描述，并浮动在图片之上。由于其简单的配置，这款jQuery焦点图可以很方便地与你的网站相结合。 

使用方法

引入核心文件

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

构建html代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

< 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初始化插件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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   //** 停顿时间            })       }) 转载请注明：jQ酷 » jQuery可自动播放动画焦点图插件Koala