• 选项设置与说明

    　　Slider Revolution提供了很多参数选项设置：

    　　delay: 滑动内容停留时间。默认9000毫秒

    　　startheight: 滑动内容高度，默认490像素。

    　　startwidth: 滑动内容宽度，默认890像素。

    　　navigationType: 显示翻页图标，默认“bullet”(圆点)，如果设置为“none”则不显示。。

    　　navigationArrows: 显示翻页箭头，默认nexttobullets，即鼠标滑向时显示左右翻页箭头，如果设置为none则不显示。

    　　touchenabled: 是否允许触摸滑动，默认on即允许，如果设置为off则不允许。

    　　onHoverStop: 是否开启鼠标滑向时暂停，on：开启，off：关闭。

    　　fullWidth: 是否开启全屏展示图片内容，on：开启，off：关闭。

    　　对于每个

  • 标签可以设置各种效果：

    　　data-transition: 内容滑动效果，可以设置以下值：boxslide，boxfade，slotzoom-horizontal，slotslide-horizontal，slotfade-horizontal，slotzoom-vertical，slotslide-vertical，slotfade-vertical，curtain-1，curtain-2，curtain-3，      　         slideleft，slideright，slideup，slidedown，fade

    　　data-slotamount: 切换时被分成的方形块数。

    　　data-link: 图片链接

    　　data-delay: 设置当前滑块内容的停留时间

    　　对于每个li里面的元素，可以设置以下选项来实现各种效果。

    动画样式，class属性: class属性值代表不同的动画样式：sft - Short from Top sfb - Short from Bottom，sfr - Short from Right，sfl - Short from Left，lft - Long from Top，lfb - Long from Bottom，lfr - Long from Right，lfl - Long from Left，fade - fading

    　　data-x: 当前元素相对li的横向位移

    　　data-y : 当前元素相对li的纵向位移

    　　data-speed: 动画时间，毫秒

    　　data-start after: 当前元素等待几秒后再显示

    　　data-easing: 缓冲动画，有easeOutBack...多种动画效果，可参照jQuery Easing 动画效果扩展

例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.8.3.min.js"type="text/javascript"></script>
<script src="../js/jquery.banner.revolution.min.js" type="text/javascript"></script>
<script src="../js/banner.js" type="text/javascript"></script>
<title>无标题文档</title>
</head>

<body>
<div id="wrapper">
  <div class="fullwidthbanner-container">
    <div class="fullwidthbanner">
      <ul>
        <li data-transition="3dcurtain-horizontal" data-slotamount="15" data-masterspeed="300"> <img src="../images/banner1.png" alt="" /> </li>
        <li data-transition="3dcurtain-vertical" data-slotamount="15" data-masterspeed="300" data-link="#"> <img src="../images/banner2.png" alt="" /> </li>
        <li data-transition="papercut" data-slotamount="15" data-masterspeed="300" data-link="#"> <img src="../images/banner3.png" alt="" /> </li>
        <li data-transition="turnoff" data-slotamount="15" data-masterspeed="300"> <img src="../images/banner4.png" alt="" /> </li>
      </ul>
    </div>
  </div>
</div>
<div style="text-align:center;"></div>
</body>
</html>

　　

　　

【转载总结】jQuery和HTML5全屏焦点图的更多相关文章

  1. 一款基于jQuery和HTML5全屏焦点图

    今天爱编程小编给大家分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩.另外,这款jQuery焦点图插件的特点是全屏的效果,因此 ...

  2. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  3. HTML5全屏浏览器兼容方案

    最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit  Firefox  IE Element.requestFullscreen() ...

  4. 基于HTML5全屏图文左右滑动切换特效

    基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <main> & ...

  5. 基于jQuery商城网站全屏图片切换代码

    基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slid ...

  6. HTML5全屏操作API

    一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...

  7. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  8. HTML5全屏背景视频与 CSS 和 JS（插件或库）

    译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...

  9. 基于jQuery仿Flash横向切换焦点图

    给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...

随机推荐

  1. Zip加密

    http://www.cnblogs.com/kgdxpr/archive/2013/08/01/3230174.html

  2. time.c 的Java实现(从timestamp计算年月日时分秒等数值)

    time.c的Java实现 public class GMT { public static final int EPOCH_YEAR = 1970; public static final int[ ...

  3. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 几十套业务系统集中统一授权管理实现经验分享

    由于这几年互联网电商的快速发展,快递公司也进入了快速发展的绝好快速成长期.随着社会的强劲需求公司的业绩年年攀新高.快速发展的公司都需要有强大的IT信息系统,硬件设备基本上款到了货也可以到了,但是软件系 ...

  4. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  5. # 2015-2016-2 《Java程序设计》课程总结

    2015-2016-2 <Java程序设计>课程总结

  6. JS/CSS缓存杀手——VS插件

    背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)!    一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...

  7. javascript，从库到框架再到平台

    对于库,框架,平台,从事过后端开发的人并不陌生,一直基于.net平台做开发,本人懒惰,面对庞大的体系,基本只掌握一点开发上用得着的技术,到是在程序结构,业务过程等方面花了点精力. 随着VS开发工具的成 ...

  8. 解决 PHPExcel 长数字串显示为科学计数

    解决 PHPExcel 长数字串显示为科学计数 在excel中如果在一个默认的格中输入或复制超长数字字符串,它会显示为科学计算法,例如身份证号码,解决方法是把表格设置文本格式或在输入前加一个单引号. ...

  9. 即使用ADO.NET，也要轻量级实体映射，比Dapper和Ormlite均快

    不管出于什么原因,有时候框架人员摒弃了NH或EF,而使用原生数据库访问对象. 为了优美的编程,用上我写的轻量级映射扩展方法吧 目的:将SqlDataReader自动转换成T类型 代码如下: /// & ...

  10. 精通Web Analytics 2.0 （5） 第三章：点击流分析的奇妙世界：指标

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第三章:点击流分析的奇妙世界:指标 新的Web Analytics 2.0心态:搞定它.新的闪亮系列工具:是的.准备好了吗?当然 ...