<!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. Python抓取zabbix性能监控图

    一.通过查询zabbix db的方式通过主机IP获取到所需要的graphid(比如CPU监控图.内存监控图等,每个图对应一个graphid),最后将图片保存到本地 注:该graph必须要在 scree ...

  2. python的学习之路day6

    大纲: 1.反射 其中的方法:getattr,delattr,setattr,hasattr __import__() __import__() 注意事项 2.模块中的特殊变量 __doc__ __c ...

  3. 利用windows的计划任务和eKing.CmdReadFileAndSendEmailOper（控制台小程序）实现远程登录服务器的邮件告警提醒

    一.场景摘要: 1.windows计划任务中,有一个用户登录时候触发的事件 2.cmd命令:netstat -ano   | find "3389" 可以看到当前远程登录的IP 3 ...

  4. pig:group by之后的其它统计方法一

    --测试Top N后的其它统计 A = LOAD '/TraceParser/blackcore/' USING PigStorage() as (lk_id:chararray,host:chara ...

  5. beta冲刺————第四天（4/5）

    完善的具体内容: 前端:以下的功能还未完全实现 (1)点击收藏可以收藏入收藏夹 (2)分享操作,意见反馈 后端: 寻找文章来源,像数据库中增添了150篇的新文章.(我们的文章都要求自己内部人员看过,所 ...

  6. Spring线程池配置模板设计（基于Springboot）

    目录 线程池配置模板 基础的注解解释 常用配置参数 配置类设计 线程池使用 ThreadPoolTaskExecutor源码 线程池配置模板 springboot给我们提供了一个线程池的实现,它的底层 ...

  7. Lombok 继承时应注意的点

    lombok项目的产生就是为了省去我们手动创建getter和setter等基本方法的麻烦,它能够在我们编译源码的时候自动帮我们生成getter和setter等方法.即它最终能够达到的效果是:在源码中没 ...

  8. [题目] Luogu P3716 [CTSC2000]冰原探险

    题面 题目背景 传说中,南极有一片广阔的冰原,在冰原下藏有史前文明的遗址.整个冰原被横竖划分成了很多个大小相等的方格.在这个冰原上有N个大小不等的矩形冰山,这些巨大的冰山有着和南极一样古老的历史,每个 ...

  9. RMAN 备份数据库到DISK后进行数据恢复

    RMAN 备份数据库到DISK,然后进行数据恢复 一.rman备份 1. 全备脚本 vi bakup_level0.sql connect target / run { allocate channe ...

  10. 使用 zTree 右键菜单功能的总结

     一: 首先什么是zTree? zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.专门适合项目开发,尤其是 树状菜单.树状 ...