<!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. pong game using ncurses

    bounce2d2.c /* * bounce2d 1.0 * bounce a character (default is 'o') around the screen * defined by s ...

  2. redie config 详解

    # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位,# 通常的格式就是 1k 5gb 4m 等酱紫:## 1k => 1000 bytes# 1kb =&g ...

  3. 【转】Spring学习---为什么要用spring，springMVC

    [原文]https://www.toutiao.com/i6593182323095634445/ 首先,软件里有很多优秀的框架,有一种类型的框架,它的特点是建立在一个现有技术的基础上,提供和现有技术 ...

  4. 李嘉诚 《Are you ready》

    当你们梦想着为伟大成功的时候,你有没有刻苦的准备? 当你们有野心作领袖的时候,你有没有服务于人的谦恭? 我们常常都想有所获得,但我们有没有付出的情操? 我们都希望别人听到自己的话,我们有没有耐性聆听别 ...

  5. 乘风破浪：LeetCode真题_026_Remove Duplicates from Sorted Array

    乘风破浪:LeetCode真题_026_Remove Duplicates from Sorted Array 一.前言     我们这次的实验是去除重复的有序数组元素,有大体两种算法. 二.Remo ...

  6. python 下 安装openCV

    安装openCV openCV是Intel 创建的计算机视觉库,用于计算机图像处理. 安装anaconda,在命令行中输入conda install cv2/opencv 报错汇总 网络连接问题 报错 ...

  7. SASS对css的管理

    一.SASS简介 SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一般 ...

  8. php无限分类 下拉框

    无限分类 下拉框优势:填写参数少,只需要指定一个循环节点($parnent_id),就可以循环所有下级分类.循环输出结构很有特色,比较符合我的口味.补充: $parent_id才是上下级关联的节点,i ...

  9. Spark项目之电商用户行为分析大数据平台之（三）大数据集群的搭建

    Zookeeper集群搭建 http://www.cnblogs.com/qingyunzong/p/8619184.html Hadoop集群搭建 http://www.cnblogs.com/qi ...

  10. linux ssh 应用

    linux 服务器 连接另一个linux服务器 ssh 用户名@IP地址 linux 服务器传输文件到另一个linux服务器 scp 文件名(可多个)  用户名@IP地址:传到的目录 /home