基于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:博客园如何上 ...
随机推荐
- ORACLE经常使用命令
1 怎样查看数据库中都有什么表? select * from sys.user_tables; 2 怎样链接数据库 sqlplus /nolog;conn sys/oracle as sysdba; ...
- c语言格式大整理
1.C语言中,非零值为真,真用1表示:零值为假,假用0表示. 2.转义字符参考: \a 蜂鸣,响铃 \b 回退:向后退一格 \f 换页 \n 换行 \r 回车,光标到本行行首 \t 水平制表 \v 垂 ...
- leetcode719:直线上的第k近点对
问题描述 给定数组a[N],可以确定C(N,2)个点对,也就确定了C(N,2)个距离,求这些距离中第k小的距离(k<C(N,2)). 思路 看到第k小.第k大这种问题,首先想到二分法. 把求值问 ...
- Android开发简历书写的各个要点
对于我们这些自学成才的菜鸟来说,很多知识是欠缺的,比如如何写简历,今早上特意在网上学习了一下,写成学习笔记供大家参考. 篇幅,简历一般3页或者三页多一点是最好的,少了不好看,多了面试官不愿意看. 工作 ...
- Hadoop分布式文件系统:架构和设计
原文地址:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_design.html 引言 前提和设计目标 硬件错误 流式数据访问 大规模数据集 简单的一致性模型 ...
- oracle中的一些基本概念
Oracle数据库的物理文件是存储在磁盘上的数据文件.控制文件和日志文件的总称.数据文件和日志文件是数据库中最重要的文件.数据库由若干个表空间组成,表空间由表组成,表由段组成,段由区间组成,区间由数据 ...
- Access数据库的连接字符串
<!-- Access2007 --> Provider=Microsoft.ACE.OLEDB.12.0;Data Source=data\myAccess_db.accdb;Persi ...
- Solutions for the Maximum Subsequence Sum Problem
The maximum subarray problem is the task of finding the contiguous subarray within a one-dimensional ...
- mysql 监控qps脚本
mysqladmin -h172.16.200.43 -uroot -p status -i 1 #!/bin/bash mysqladmin -uroot -h172.16.200.43 -p'00 ...
- caffe make 编译
其实嘛,出现这个的原因在于,已经编译过啦,没有任何改动,那还烦劳编译啥呢. 那Linux又是如何知道已经编译过了呢? 那就要看makefile的规则啦.makefile的规则是所想产生的文件需要依赖很 ...