基于jquery带时间轴的图片轮播切换代码
基于jquery图片标题随小圆点放大切换。这是是一款带时间轴的图片轮播切换代码。效果图如下:

实现的代码。
html代码:
<div id="decoroll2" class="imgfocus">
<div id="decoimg_a2" class="imgbox">
<div class="decoimg_b2">
<a href="http://www.w2bc.com/">
<img src="img/1.jpg"></a></div>
<div class="decoimg_b2">
<a href="http://www.w2bc.com/">
<img src="img/2.jpg"></a></div>
<div class="decoimg_b2">
<a href="http://www.w2bc.com/">
<img src="img/3.jpg"></a></div>
<div class="decoimg_b2">
<a href="http://www.w2bc.com/">
<img src="img/4.jpg"></a></div>
</div>
<ul id="deconum2" class="num_a2">
<li><a href="javascript:void(0)" hidefocus="true" target="_self">杨幂</a></li>
<li><a href="javascript:void(0)" hidefocus="true" target="_self">范冰冰</a></li>
<li><a href="javascript:void(0)" hidefocus="true" target="_self">高圆圆</a></li>
<li><a href="javascript:void(0)" hidefocus="true" target="_self">刘诗诗</a></li>
</ul>
</div>
js代码:
Qfast.add('widgets', { path: "js/terminator2.2.min.js", type: "js", requires: ['fx'] });
Qfast(false, 'widgets', function () {
K.tabs({
id: 'decoroll2', //焦点图包裹id
conId: "decoimg_a2", //大图域包裹id
tabId: "deconum2", //小圆点数字提示id
tabTn: "a",
conCn: '.decoimg_b2', //大图域配置class
auto: 1, //自动播放 1或0
effect: 'fade', //效果配置
eType: 'mouseover', // 鼠标事件
pageBt: true, //是否有按钮切换页码
bns: ['.prev', '.next'], //前后按钮配置class
interval: 3000// 停顿时间
})
})
via:http://www.w2bc.com/Article/30333
基于jquery带时间轴的图片轮播切换代码的更多相关文章
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- jQuery - 广告图片轮播切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jQuery 图片轮播的代码分离
以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号. html代码,以及对应的css代码: <div id=&q ...
- javaScript实现图片滚动及一个普通图片轮播的代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于jQuery的时间轴鼠标悬停动画插件
之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比 ...
- 基于jquery实现的上传图片及图片预览效果代码
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- 图片轮播 js代码
<script type="text/javascript"> //图片轮换 $(function () { //------------------ var sWid ...
- jquery实现带左右箭头和数字焦点的图片轮播手写代码
以前图片轮播经常用网上的插件,然后想说自己也要认真看看,一步一步弄明白,所以就自己研究写了个图片轮播的代码,我自己觉得还算是挺简单的.如有改进的地方,欢迎你能帮我指出,共同进步. (ps:博客园如何上 ...
随机推荐
- JUC-闭锁:CountDownLatch
CountDownLatch::闭锁,在完成某些运算是,只有其他所有线程的运算全部完成,当前运算才继续执行. 实例化:参数:设置一个计数器的值. final CountDownLatch latch ...
- DIY手机万能红外遥控器
DIY手机万能红外遥控器 1.手机安装软件:遥控精灵 2.红外二极管两个(旧的遥控器里面可以拆) 3.耳机的插头一个 步骤:首选讲两个二极管的正负相接(即a二极管的正极连接b二极管的负极,a二极管的负 ...
- MONyog_5.6.9.0 key激活|监控MYSQL
SQLyog与MONyog是一家公司对mysql推出的商业化软件,可能大家对SQLyog很熟悉,MONyog是对mysql-server服务的监控. 脚本执行时长.安全性.等的监控! key:a668 ...
- Java设计模式中的单例模式
有时候在实际项目的开发中,我们会碰到这样一种情况,该类只允许存在一个实例化的对象,不允许存在一个以上的实例化对象,我们将这种情况称为Java设计模式中的单例模式.设计单例模式主要采用了Java的pri ...
- js 动态增加行删除行
<body> <table id="tableID" border="1" align="center" width=&q ...
- 利用Aspose.BarCode生成条码
生成条码有很多控件,大部分好的控件,做出来的条码精确清晰,但是往往该部分的控件费用都很高,这里推荐大家使用6.0版本的破解版,可以生成无水印,下方也可以不显示文字. 1.下图是 onbarcode 控 ...
- CYDIA装了个插件,想删除怎么都删除,电脑如何删除插件?
http://bbs.weiphone.com/read-htm-tid-3670917.html 装了个插件,想删除怎么都删除不掉不要跟我说在CYDIA里面删除.,在CYDIA里点击该插件就会闪退C ...
- GFW的前世今生,一部GFW之父方滨兴的发家史
http://whu.myubbs.com/thread-96390-1-1.html方滨兴(1960年7月17日-),男,中国共chan党党员,中国工程院院士,全国人大代表,中国科学院信息工程研究所 ...
- SSAS多维数据集以及维度的建立
首先打开vs建立一个Analysis Services项目,然后点击数据源文件右键[新建数据源],根据数据源向导建立自己的数据源,如图1: 点击[确定],选择刚才的数据连接,点击[下一步]进入模拟信息 ...
- #pragma pack
原文链接: http://www.cnblogs.com/s7vens/archive/2012/03/06/2382236.html pack 为 struct, union 和 class 等的成 ...