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

HTML文件代码如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8"/>

<title>JS图片自动和可控的轮播切换特效 - 何问起 HoverTree</title><base target="_blank" />

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css">

<script type="text/javascript" src="http://hovertree.com/texiao/js/1/js/koala.min.1.5.js"></script>

<script type="text/javascript">

Qfast.add('widgets', { path: "http://hovertree.com/texiao/js/1/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// 停顿时间

})

})

</script>

</head>

<body>

<div><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/hvtart/bjae/f03e85410878db53.htm">原文</a>

<a href="http://hovertree.com/texiao/">特效库</a>

</div>

<div id="decoroll2" class="imgfocus">

<div id="decoimg_a2" class="imgbox">

<div class="decoimg_b2">

<a href="http://hovertree.com/hvtart/bjae/f03e85410878db53.htm">

<img src="http://hovertree.com/texiao/js/1/img/1.jpg">

</a>

</div>

<div class="decoimg_b2">

<a href="http://keleyi.com/">

<img src="http://hovertree.com/texiao/js/1/img/2.jpg">

</a>

</div>

<div class="decoimg_b2">

<a href="http://hovertree.com/shortanswer/">

<img src="http://hovertree.com/texiao/js/1/img/3.jpg">

</a>

</div>

<div class="decoimg_b2">

<a href="http://hovertree.com/guestbook/">

<img src="http://hovertree.com/texiao/js/1/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>

<br />

</body>

</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. SQL Server 内存和Paging

    一,内存term VAS:Virtual Address Space,是App能够申请访问的最大地址空间. Physical Memory:对SQL Server 来说,频繁访问的数据对象长时间驻留在 ...

  2. QUOTED_IDENTIFIER 选项对 index 的影响

    在修改或创建Index时,有时会收到一些Error Message,指明Set options设置错误,最常见的选项是:SET QUOTED_IDENTIFIER 选项 当创建或修改的index包含c ...

  3. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  4. 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍

    我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...

  5. 关于SubSonic3.0查询或更新时出现System.NullReferenceException异常的处理

    在调试程序时,同事发现添加记录时,出现了System.NullReferenceException异常 DictBase dict = new DictBase();    dict.DictCode ...

  6. scikit-learn 支持向量机算法库使用小结

    之前通过一个系列对支持向量机(以下简称SVM)算法的原理做了一个总结,本文从实践的角度对scikit-learn SVM算法库的使用做一个小结.scikit-learn SVM算法库封装了libsvm ...

  7. LVS+Keepalived搭建MyCAT高可用负载均衡集群

    LVS+Keepalived 介绍 LVS LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国 ...

  8. IDDD 实现领域驱动设计－架构之经典分层

    上一篇:<IDDD 实现领域驱动设计-上下文映射图及其相关概念> 在<实现领域驱动设计>书中,分层的概念作者讲述的很少,也就几页的内容,但对于我来说,有很多的感触需要诉说.之前 ...

  9. Zend Studio主题的设置

    用了两年的Zend Studio,一直是默认的白色主题,让人都产生了视觉疲劳,今天才发现Zend Studio的设置方法: 步骤1:help–>install new software…

  10. Tomcat创建HTTPS访问，java访问https

    一 https和ssL HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的 ...