基于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. ContextMenu上下文菜单

    上下文菜单一般是真针对ListView(多条数据的操作) 需求:在ListView中显示通话记录的电话号码,长按显示的上下文菜单为复制号码到拨号盘.发送信息.复制号码,与之相对应的事件. 布局代码: ...

  2. 关于PHP中的opcode

    简介 1.当Zend engine解释器完成对脚本代码的分析后,便将它们生成可以直接运行的中间代码,也称为操作码(Operate Code,opcode),opcode是一个四元组,(opcode, ...

  3. 常见Web前端开发笔试题

    1.什么是web标准? WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为 (Behavior). 对应的标准也分 ...

  4. iOS archiveRootObject 归档失败问题

    归档失败问题出在路径上,NSHomeDirectory() NSString *stringPath = [NSSearchPathForDirectoriesInDomains(NSDocument ...

  5. sqoop安装遇到的问题

    错误: 找不到或无法加载主类 org.apache.sqoop.Sqoop最终解决办法是吧sqoop目录下的sqoop-1.4.4.jar拷贝到hadoop的lib目录下解决 Warning: /us ...

  6. gVim 中文内容显示为乱码的解决办法

    http://blog.csdn.net/sunmanzth/article/details/6143600打开vimrc文件,在vim的安装目录下可以找到该文件,或在windows下是在vim/gv ...

  7. 史上最简单的ButterKnife配置教程

    网上的教程感觉都是抄来抄去,没一个靠谱的 还是自己丰衣足食搞一个ButterKnife配置教程吧.. 我的Android Studio版本是3.3. 1.dependencies中添加依赖 imple ...

  8. 像素(px)到底是个什么单位

    px,对于许多网页设计者来说,是最常用的CSS长度单位.然而,1px到底多长,恐怕没有多少人回答得上来. CSS长度本身有绝对长度和相对长度的区分. cm.pt之类的都是绝对长度,它们是物理长度——1 ...

  9. Oracle免费版和付费版,各版本的说明

    Oracle免费版和付费版的区别:   首先这里给出一个答案,oracle确实是免费的给学习的人员使用.oracle的策略就是你可以随意下载我的产品,包括oracle,weblogic等产品用于学习, ...

  10. 基于RHCS的web双机热备集群搭建

    基于RHCS的web双机热备集群搭建 RHCS集群执行原理及功能介绍 1. 分布式集群管理器(CMAN)  Cluster Manager.简称CMAN.是一个分布式集群管理工具.它执行在集群的各个节 ...