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

jQuery可自动播放动画焦点图插件Koala的更多相关文章

  1. 一款基于jQuery的图片下滑切换焦点图插件

    之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的 ...

  2. 基于jQuery的美食时间轴焦点图插件

    这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预 ...

  3. 一款基于jQuery的图片分组切换焦点图插件

    这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...

  4. jQuery可自动播放动画的焦点图

    在线演示 本地下载

  5. 分享10款常用的jQuery焦点图插件

    爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...

  6. 分享8个常用的jQuery焦点图插件

    现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微 ...

  7. 一款基于的jQuery仿苹果样式焦点图插件

    这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...

  8. 基于jQuery的宽屏可左右切换的焦点图插件

    之前分享了很多实用的jQuery焦点图插件,大家可以看看.今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片.效果图如下: 在线预览   源码 ...

  9. 一款基于jQuery多图切换焦点图插件

    这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...

随机推荐

  1. 【趣事】用 JavaScript 对抗 DDOS 攻击

    继续趣事分享. 上回聊到了大学里用一根网线发起攻击,今天接着往后讲. 不过这次讲的正好相反 -- 不是攻击,而是防御.一个奇葩防火墙的开发经历. 第二学期大家都带了电脑,于是可以用更高端的方法断网了. ...

  2. angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用

    今天我们要讲的是ng2的路由系统. 例子

  3. 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack

    因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...

  4. 小兔Java教程 - 三分钟学会Java文件上传

    今天群里正好有人问起了Java文件上传的事情,本来这是Java里面的知识点,而我目前最主要的精力还是放在了JS的部分.不过反正也不麻烦,我就专门开一贴来聊聊Java文件上传的基本实现方法吧. 话不多说 ...

  5. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  6. ADFS3.0与SharePoint2013安装配置(原创)

    现在越来越多的企业使用ADFS作为单点登录,我希望今天的内容能帮助大家了解如何配置ADFS和SharePoint 2013.安装配置SharePoint2013这块就不做具体描述了,今天主要讲一下怎么 ...

  7. Supermap iCloudManager -负载均衡

    Supermap icm负载均衡理解: 应用场景:地图出图 子节点1和子节点2中的服务保持一致,一般情况下设置的是匿名用户通过nginx访问服务信息,所以不需要登录. 1.通过nginx分发请求,(轮 ...

  8. exp/imp 与 expdp/impdp 区别

    在平常备库和数据库迁移的时候,当遇到大的数据库的时候在用exp的时候往往是需要好几个小时,耗费大量时间.oracle10g以后可以用expdp来导出数据库花费的时间要远小于exp花费的时间,而且文件也 ...

  9. Linux-Rhel6 恢复误删文件

    需要工具extundelete(可通过xshell上传下载到linux)知识点:ifconifig eth0             查看ipfdisk /dev/sda          管理磁盘m ...

  10. BZOJ 1597: [Usaco2008 Mar]土地购买 [斜率优化DP]

    1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4026  Solved: 1473[Submit] ...