jquery automatically plays the animated focus map plugin Koala

Koala is a simple and practical jquery focus Graph slide Plug-in that focuses on not only animating images while playing them, but also automatically playing them. Each image of the jquery Focus map can be set with a text description and float on top of the image. Thanks to its simple configuration, this jquery focus map can be easily combined with your website.

How to use

Introducing Core Files

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

Building HTML code

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

jquery automatically plays the animated focus map plugin Koala