点击这里查看效果：
http://hovertree.com/texiao/js/1.htm

HTML文件代码如下：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>JS图片自动和可控的轮播切换特效 - 何问起 HoverTree</title><base target="_blank" />
  6. <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css">
  7. <script type="text/javascript" src="http://hovertree.com/texiao/js/1/js/koala.min.1.5.js"></script>
  8. <script type="text/javascript">
  9. Qfast.add('widgets', { path: "http://hovertree.com/texiao/js/1/js/terminator2.2.min.js", type: "js", requires: ['fx'] });
  10. Qfast(false, 'widgets', function () {
  11. K.tabs({
  12. id: 'decoroll2', //焦点图包裹id
  13. conId: "decoimg_a2", //大图域包裹id
  14. tabId: "deconum2", //小圆点数字提示id
  15. tabTn: "a",
  16. conCn: '.decoimg_b2', //大图域配置class
  17. auto: 1, //自动播放 1或0
  18. effect: 'fade', //效果配置
  19. eType: 'mouseover', // 鼠标事件
  20. pageBt: true, //是否有按钮切换页码
  21. bns: ['.prev', '.next'], //前后按钮配置class
  22. interval: 3000// 停顿时间
  23. })
  24. })
  25. </script>
  26. </head>
  27. <body>
  28. <div><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/hvtart/bjae/f03e85410878db53.htm">原文</a>
  29. <a href="http://hovertree.com/texiao/">特效库</a>
  30. </div>
  31. <div id="decoroll2" class="imgfocus">
  32. <div id="decoimg_a2" class="imgbox">
  33. <div class="decoimg_b2">
  34. <a href="http://hovertree.com/hvtart/bjae/f03e85410878db53.htm">
  35. <img src="http://hovertree.com/texiao/js/1/img/1.jpg">
  36. </a>
  37. </div>
  38. <div class="decoimg_b2">
  39. <a href="http://keleyi.com/">
  40. <img src="http://hovertree.com/texiao/js/1/img/2.jpg">
  41. </a>
  42. </div>
  43. <div class="decoimg_b2">
  44. <a href="http://hovertree.com/shortanswer/">
  45. <img src="http://hovertree.com/texiao/js/1/img/3.jpg">
  46. </a>
  47. </div>
  48. <div class="decoimg_b2">
  49. <a href="http://hovertree.com/guestbook/">
  50. <img src="http://hovertree.com/texiao/js/1/img/4.jpg">
  51. </a>
  52. </div>
  53. </div>
  54. <ul id="deconum2" class="num_a2">
  55. <li><a href="javascript:void(0)" hidefocus="true" target="_self">杨幂</a></li>
  56. <li><a href="javascript:void(0)" hidefocus="true" target="_self">范冰冰</a></li>
  57. <li><a href="javascript:void(0)" hidefocus="true" target="_self">高圆圆</a></li>
  58. <li><a href="javascript:void(0)" hidefocus="true" target="_self">刘诗诗</a></li>
  59. </ul>
  60. </div>
  61. <br />
  62. </body>
  63. </html>

转自：http://hovertree.com/hvtart/bjae/f03e85410878db53.htm

更多图片轮播特效：http://keleyi.com/a/bjac/s3sw6q5t.htm

web前端汇总：http://www.cnblogs.com/jihua/p/webfront.html

JS图片自动和可控的轮播切换特效的更多相关文章

  1. 3D轮播切换特效 源码

    这个3D轮播切换特效是我2017年2月份写的 当初我 刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范 每个浏览器 ...

  2. js/html/css做一个简单的图片自动（auto）轮播效果//带注释

    FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [ ...

  3. 基于jquery带时间轴的图片轮播切换代码

    基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2 ...

  4. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

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

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

  6. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  7. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  8. jQuery实现轮播切换以及将其封装成插件（2）

    在上一篇博文中,我们完成了一个简单的轮播切换.它的功能比较简单,仅仅能定时切换图片. 但是有没有这样一种情况.当我们特意的想看某一个轮播显示项时不希望等轮播一圈才能等到,希望通过图上的一些元素,触发某 ...

  9. jQuery实现轮播切换以及将其封装成插件（3）

    在前两篇博文中,我们写了一个普通的轮播切换.但是我们不能每一次需要这个功能就把这些代码有重新敲一次.下面我们就将它封装成一个插件. 至于什么是插件,又为什么要封装插件,不是本文考虑的内容.  我们趁着 ...

随机推荐

  1. iOS-中app启动闪退的原因

    这种情况应和所谓的内存不足关系不大,很少有程序会在初始化时载入大量内容导致崩溃,并且这类问题也很容易在开发阶段被发现,所以内存不足造成秒退的可能性低(内存不足退,通常是程序用了一段时间,切换了几个画面 ...

  2. Distributed2：Linked Server Login 添加和删除

    一,通过 sys.sp_addlinkedsrvlogin 创建Linked Server的Login 当在local Server 上需要访问Linked Server时,Local Server ...

  3. WPF调用Matlab函数方法

    有的时候用C#写图像处理方法,比较费事,不如Matlab简单,但是Matlab又做不出WPF那样的好看界面,怎么办呢. 今天正好我要实现这个功能,就顺便写个小例子,给需要的人做个借鉴. 想要用WPF调 ...

  4. IOS数据存储之FMDB数据库

    前言: 最近几天一直在折腾数据库存储,之前文章(http://www.cnblogs.com/whoislcj/p/5485959.html)介绍了Sqlite 数据库,SQLite是一种小型的轻量级 ...

  5. JavaScript框架设计(三) push兼容性和选择器上下文

    JavaScript框架设计(三) push兼容性和选择器上下文 博主很久没有更博了. 在上一篇 JavaScript框架设计(二) 中实现了最基本的选择器,getId,getTag和getClass ...

  6. ReactJS分析之入口函数render

    前言 在使用React进行构建应用时,我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上,将任务交给浏览器,进而进行layout和paint等步骤,这个函数就是React.render() ...

  7. 简析将shp导入Oracle并利用geoserver将导入的数据发布

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.环境准备 1.1 软件准备 首先要安装有支持空间数据的Oracle ...

  8. C#创建安全的栈(Stack)存储结构

    在C#中,用于存储的结构较多,如:DataTable,DataSet,List,Dictionary,Stack等结构,各种结构采用的存储的方式存在差异,效率也必然各有优缺点.现在介绍一种后进先出的数 ...

  9. mciSendString 的两个小坑

    刚刚修正了自己用的小闹钟的代码. 坑1:REPEAT 选项的作用范围 原来用得好好的,之后选择 .wav 文件,居然不出声音了…… 诶,MCI 肯定支持 .wav 的啊…… 仔细想想,我以前都是选 . ...

  10. OpenCV，计算两幅图像的单应矩阵

    平面射影变换是关于其次3维矢量的一种线性变换,可以使用一个非奇异的$3 \times 3$矩阵H表示,$X' = HX$,射影变换也叫做单应(Homography).计算出两幅图像之间的单应矩阵H,那 ...