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