<!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. 无法获取链接服务器 "XXX" 的 OLE DB 访问接口 "SQLNCLI10" 的架构行集 "DBSCHEMA_TABLES_INFO"。该访问接口支持该接口，但使用该接口时返回了失败代码。

    1. SQL 2000 下载补丁 SQL2KSP4 ,进行安装 2.找到SQL2KSP4\install\instcat.sql 并在sql2000 中打开查询分析器中执行

  2. SpringMVC_JDBC

    链接:https://pan.baidu.com/s/1a8Aht1eIeRYGb78X9v3ubA 密码:h2zy 未完,待续...

  3. Django之基于iframe的ajax伪造

    IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME).iframe元素会创建包含另外一个文档的内联框架 ajax的理念是不进行浏览器页面刷新的信息获取更新,也就是局部刷新. 那 ...

  4. mysql host'XXX' is not allowed to connect to this mysql server

    错误的原因一般是没有添加 IP可远程的权限. 首先以 root 帐户登陆 MySQL 1.在 Windows 主机中点击开始菜单,运行,输入“cmd”,进入控制台,然后cd 进入MySQL 的 bin ...

  5. Local policy - User rights assignment 对照表

    "SeCreateTokenPrivilege"  --> "Create a token object" "SeAssignPrimaryTo ...

  6. react native环境搭建（含错误处理）

    1.  Python 2  注意,不要选择3.0及以上的,还不成熟 安装过程中一直 next就可以了,但是注意下图,勾选添加到系统环境变量 安装完之后cmd输入 python 查看是否安装成功. 补充 ...

  7. 日常使用Shell积累

    HDFS统计文件行数: hdfs dfs -cat hdfs://ns3/wordcount/* |wc -l

  8. 竟然是它：# vi /etc/resolv.conf

    有数据库主机: 前端tomcat应用连接慢,开发人员本地pl/sql连接也超慢: 检查了系统i/o ,nethogs,top,检查了数据listener.ora,awr,wait_event,sql ...

  9. C#/JS AES字符串加密和解密

    往往我们有一种需求:在页面端实现对即将传入到后台端的某些字符串进行加密,然后在后台端对传入进来的字符串做解密.在一些有安全要求的数据传输上会用到此种方式 下面分别列出js端和后台端的加密或解密代码. ...

  10. [HEOI2012]采花 BZOJ2743

    分析: 听说主席树和莫队可以做,前者不想写,后者我不会... 我们考虑将询问离线,按照左端点排序,之后先处理好从1开始选的答案,之后枚举从1到n,之后依次删除nxt[i],添加nxt[nxt[i]], ...