基于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. window.postMessage实现网页间通信

    window.postMessage() 方法可以安全地实现跨域通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以 ...

  2. Python 的 if __name__ == '__main__'

    Python 文件 最后部分会有: if __name__ == '__main__': TestRLSO()……………… 1)首先,这是一个判断语句. 表示执行的是此代码所在的文件.如果这个文件是作 ...

  3. Java编程性能优化一些事儿【转】

    原文出处: 陶邦仁 在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. 1. 尽量在合适的场合使用单例 使用单例可以减轻加载 ...

  4. 【ERROR】EXP-00091

    问题: 在我们做exp的过程中可能经常会遇到EXP-00091: Exporting questionable statistics.这样的EXP信息,其实它就是exp的error message,它 ...

  5. configure: error: newly created file is older than distributed files!

    在linux下安装软件包的时候,有时候提示 configure: error: newly created file is older than distributed files!Check you ...

  6. Spark与Pandas中DataFrame对比

      Pandas Spark 工作方式 单机single machine tool,没有并行机制parallelism不支持Hadoop,处理大量数据有瓶颈 分布式并行计算框架,内建并行机制paral ...

  7. 关于PFM工作模式的一些资料总结

    一.PFM模式 为什么升压中用的多呢(http://bbs.eetop.cn/thread-357181-1-1.html) 1.PFM 对于Boost Converter来说可以把PWM固有的右半平 ...

  8. puppeteer (Nodejs版selenium )快速入门

    官网 https://pptr.dev/ api 与 教程: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.mdhttp ...

  9. mysql 慢查询日志,灾难日志恢复,错误日志

    灾难日志 记录了所有的DDL(Create.Drop和Alter)和DML(insert.update.delete_的语句,但不包括查询的语句 打开mysql.ini 找到Binary Loggin ...

  10. ubuntu常用的一些命令

    1 添加root用户 其实ubuntu在安装时已经添加了root用户,只是屏蔽了.所以只需要激活即可.打开终端ctrl+alt+t,输入sudo passwd root,然后输入要添加给root的密码 ...