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 //** 停顿时间 }) }) 
