<!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>

Js_图片轮播的更多相关文章

  1. 原生Js_简易图片轮播模板

    功能:图片自动循环轮播,通过点击“上一张”,“下一张”按钮来控制图片的切换 <!DOCTYPE html> <html> <head> <meta chars ...

  2. 原生Js_使用setInterval() 方法实现图片轮播功能

    用javascript图片轮播功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  4. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  5. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  6. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  7. 基于面向对象的图片轮播（js原生代码）

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

  8. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

  9. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

随机推荐

  1. 入坑Vue

    长期的后端数据开发着实有些枯燥无趣,项目完工,闲暇之际,最近一直在研究前端方面的东西,不得感叹,前端技术发展速度快的让人有些目不暇接,从jQuery开启的插件化时代,几乎许多网站都被jQuery支配, ...

  2. CSS| text文本属性

    注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 1)  text-indent 取值: 5px/2 ...

  3. HDFS NameNode内存详解

    前言 <HDFS NameNode内存全景>中,我们从NameNode内部数据结构的视角,对它的内存全景及几个关键数据结构进行了简单解读,并结合实际场景介绍了NameNode可能遇到的问题 ...

  4. centos httpd开启https服务并申请免费https

    安装httpd yum -y install httpd httpd配置文件路径  /etc/httpd/conf/httpd.conf 安装OpenSSL yum install mod_ssl o ...

  5. 使用C#删除一个字符串数组中的空字符串

    C#中要如何才能删除一个字符串数组中的空字符串呢?随着微软对C#不断发展和更新,C#中对于数组操作的方式也变得越来越多样化.以往要实现过滤数组中的空字符串,都是需要实行循环的方式来排除和过滤.C#3. ...

  6. Django商城项目笔记No.4用户部分-注册接口-图片验证码

    Django商城项目笔记No.4用户部分-注册接口-图片验证码 1.首先分析注册业务接口 1.1.分析可得,至少这么几个接口 图片验证码 短信验证码 用户名是否存在 手机号是否存在 整体注册接口 图片 ...

  7. [BUG]自己的bug自己解，记一次在变量使用过程引发的bug

    [实现的功能要求]在短信编辑界面,将所有的emoji表情全部插入到编辑区域,其中表情共有5页,每遍历完一页时需要自动翻页重新获取表情并插入,在第5页中只有10个表情 下面先看看这段代码,大家能否看出有 ...

  8. python第三十课－－异常(异常处理定义格式和常见类型)

    演示: 1).异常处理的定义格式: 2).常见的运行时异常类型: try: print(10/0) num=int('132a') except Exception as e: print('出错了. ...

  9. ACM模拟赛

    今天是毕业的学长给高二的同学测试.组队比赛,ACM赛制,于是就愉快的和学姐一队啦. 看到英文题面感到恐慌,不过好在不难读懂. A:并没有什么技术含量的模拟题: B:字符串题,给定一些比赛和每个队胜利的 ...

  10. BZOJ3233:[AHOI2013]找硬币(DP)

    Description 小蛇是金融部部长.最近她决定制造一系列新的货币.假设她要制造的货币的面值为x1,x2,x3… 那么x1必须为1,xb必须为xa的正整数倍(b>a).例如 1,5,125, ...