JQuery使用插件实现轮播

留下方便以后看

Koala是一款简单而实用的jQuery焦点图幻灯片插件，焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果，而且图片可以自动播放。该jQuery焦点图的每一张图片都可以设置文字描述，并浮动在图片之上。由于其简单的配置，这款jQuery焦点图可以很方便地与你的网站相结合。

使用方法

引入核心文件

1 2	`<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 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>

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

})

转载请注明：jQ酷 » jQuery可自动播放动画焦点图插件Koala

JQuery使用插件实现轮播相关推荐

横向全屏滑动插件_【案例】JQuery横向手风琴图片轮播切换代码
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源哈喽大家好,又到了每周二经典案例环节啦~同学们还想了解哪些网页知识今天段老师给同学们带来的是JQuery横向手 ...
jQuery/Zepto的Bootstrap轮播图中图片自适应宽高并居中插件
2019独角兽企业重金招聘Python工程师标准>>> 今天写了一下午带晚上的jQuery/Zepto的Bootstrap轮播图插件,功能是能够根据当前较短的一边实现自适应宽度,并且 ...
html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法在页面中引入jqu ...
Android 旋转木马轮播,jQuery旋转木马式幻灯片轮播特效
本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件,它适合在PC端与移动端实现旋转木马幻灯片特效.具体内容如下特点响应式--适应任何视窗的宽度混合内容不需要CSS ...
jquery版的图片轮播加动画效果
jquery版的图片轮播加动画效果 1.效果图展示: 2.代码呈上: <!DOCTYPE html> <html> <head><meta charset=& ...
html自动轮播计时器不准,用jQuery写的图片轮播为何停止定时器只能停止一次？...
用jQuery写的图片轮播为何只有初次鼠标进入才能停止定时器?给我的感觉是后面无法停止自动播放,而且播放速度加快,调试很久不知问题出现在哪. 附上demo网址参考:http://huzerui.com ...
jQuery实现广告图片轮播切换
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
js轮播图片小圆点变化_用jQuery实现圆点图片轮播效果
在页面的指定位置实现的图片自动的左右轮流切换展示效果,当点击图片左下的标签(或中间的小圆点)切换到对应的图片.接下来通过本文给大家分享用jQuery实现圆点图片轮播效果实例代码,需要的朋友参考下图片 ...
html ul 圆点轮播图,用jQuery实现圆点图片轮播效果
图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : --------- ...

JQuery使用插件实现轮播

JQuery使用插件实现轮播相关推荐

最新文章

热门文章