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

        }) 

    })

时间: 2024-10-05 05:07:23

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

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

之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的切换效果,并且在向下切换时产生弹性的动画特效,另外,插件是基于jQuery的,各种浏览器的兼容性应该还不错. 在线预览   源码下载 下面是实现这款jQuery焦点图的过程和代码. HTML代码: <div class="slider-wrap col-width"> <

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

这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实用. 在线预览   源码下载 实现的代码. html代码: <div class="device"> <h2> <a href="javascript:;" class="pre">上一组</a><

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

这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预览   源码下载 实现的代码. html代码: <div class="main_w"> <div class="index_zzw" id="index_zzw"> <div class="index_zzw

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

爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图插件,大部分对开发者来说基本上可以直接拿来使用.今天我们要分享一款可以自动播放动画的jQuery焦点图插件,它在切换图片的时候可以播放对应图片的各种动画效果. 在线预览   源码下载 2.jQuery可自动播放动画的焦点图插件 这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又

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

现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微修改就可以使用.本文精选了8款比较强大的jQuery焦点图插件,希望对读者有所帮助. 1.jQuery动画焦点图 可自动播放图片 这是一款最基础的jQuery焦点图插件,包括切换的动画也是最基本的淡入淡出动画特效,但是它很轻巧,而且也比较容易扩展,因此也推荐使用. 在线预览   源码下载 2.jQu

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

这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款jQuery焦点图插件非常适合在产片展示的网页上使用. 在线预览   源码下载 接下来我们一起分享一下实现这款苹果焦点图的过程及源码. HTML代码: <div id="gallery"> <div id="slides" style="wi

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

之前分享了很多实用的jQuery焦点图插件,大家可以看看.今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="Big_Slide_box"> <div id="Big_Slide"> <ul> <li style="background: #E81216;" id

jquery带三种切换效果的焦点图插件-luara.js插件

1.简介 luara.js 焦点图插件,用于设置焦点幻灯片的插件,实例中列出了三种最常用的效果,渐隐.上滑.左滑,可以设置切换的时间间隔. 2.插件调用代码段 <script> $(function(){ <!--调用Luara示例--> $(".example1").luara({ width:"500", height:"334", interval:5000, selected:"seleted"

Jquery插件使用 焦点图插件 MyFocus ,另外记录一款插件 KinMaxShow大背景图插件。

以前用flash做首页图片轮播.最近的网站里用到一个插件MyFocus插件焦点图插件 用法如下: <script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script> <script type="text/javascript">                             //设置