基于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带时间轴的图片轮播切换代码的更多相关文章

  1. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  2. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  3. jQuery - 广告图片轮播切换

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. jQuery 图片轮播的代码分离

    以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号. html代码,以及对应的css代码: <div id=&q ...

  5. javaScript实现图片滚动及一个普通图片轮播的代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 基于jQuery的时间轴鼠标悬停动画插件

    之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比 ...

  7. 基于jquery实现的上传图片及图片预览效果代码

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  8. 图片轮播 js代码

    <script type="text/javascript"> //图片轮换 $(function () { //------------------ var sWid ...

  9. jquery实现带左右箭头和数字焦点的图片轮播手写代码

    以前图片轮播经常用网上的插件,然后想说自己也要认真看看,一步一步弄明白,所以就自己研究写了个图片轮播的代码,我自己觉得还算是挺简单的.如有改进的地方,欢迎你能帮我指出,共同进步. (ps:博客园如何上 ...

随机推荐

  1. ORACLE经常使用命令

    1 怎样查看数据库中都有什么表? select * from sys.user_tables; 2 怎样链接数据库 sqlplus /nolog;conn sys/oracle as sysdba; ...

  2. c语言格式大整理

    1.C语言中,非零值为真,真用1表示:零值为假,假用0表示. 2.转义字符参考: \a 蜂鸣,响铃 \b 回退:向后退一格 \f 换页 \n 换行 \r 回车,光标到本行行首 \t 水平制表 \v 垂 ...

  3. leetcode719:直线上的第k近点对

    问题描述 给定数组a[N],可以确定C(N,2)个点对,也就确定了C(N,2)个距离,求这些距离中第k小的距离(k<C(N,2)). 思路 看到第k小.第k大这种问题,首先想到二分法. 把求值问 ...

  4. Android开发简历书写的各个要点

    对于我们这些自学成才的菜鸟来说,很多知识是欠缺的,比如如何写简历,今早上特意在网上学习了一下,写成学习笔记供大家参考. 篇幅,简历一般3页或者三页多一点是最好的,少了不好看,多了面试官不愿意看. 工作 ...

  5. Hadoop分布式文件系统:架构和设计

    原文地址:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_design.html 引言 前提和设计目标 硬件错误 流式数据访问 大规模数据集 简单的一致性模型 ...

  6. oracle中的一些基本概念

    Oracle数据库的物理文件是存储在磁盘上的数据文件.控制文件和日志文件的总称.数据文件和日志文件是数据库中最重要的文件.数据库由若干个表空间组成,表空间由表组成,表由段组成,段由区间组成,区间由数据 ...

  7. Access数据库的连接字符串

    <!-- Access2007 --> Provider=Microsoft.ACE.OLEDB.12.0;Data Source=data\myAccess_db.accdb;Persi ...

  8. Solutions for the Maximum Subsequence Sum Problem

    The maximum subarray problem is the task of finding the contiguous subarray within a one-dimensional ...

  9. mysql 监控qps脚本

    mysqladmin -h172.16.200.43 -uroot -p status -i 1 #!/bin/bash mysqladmin -uroot -h172.16.200.43 -p'00 ...

  10. caffe make 编译

    其实嘛,出现这个的原因在于,已经编译过啦,没有任何改动,那还烦劳编译啥呢. 那Linux又是如何知道已经编译过了呢? 那就要看makefile的规则啦.makefile的规则是所想产生的文件需要依赖很 ...