• 选项设置与说明

    　　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. Smokeping -- 监控网络质量

    1.下载fping.echoping.smokeping 链接:http://pan.baidu.com/s/1pL4HLYb 密码:fxe2 2.安装依赖包 yum install -y perl ...

  2. Java的泛型反射

    If the superclass is a parameterized type, the {@code Type} * object returned must accurately reflec ...

  3. 导出本地和远程SVN项目, Export remote SVN repository

    在有服务器控制权的情况下, 源服务器上 sudo svnadmin dump ironbank/ > ~/ironbank.svn.dump 在目的服务器上 sudo svnadmin crea ...

  4. Spring源码分析——资源访问利器Resource之接口和抽象类分析

    从今天开始,一步步走上源码分析的路.刚开始肯定要从简单着手.我们先从Java发展史上最强大的框架——Spring...旗下的资源抽象接口Resource开始吧. 我看了好多分析Spring源码的,每每 ...

  5. 我常用的VS技巧

    声明:开发工具使用的是VS2013 1.开发 包括编辑,代码补全等 1.1快速选择一行 第一种方式:鼠标停留在要选择的行上,三击. 第二种方式:鼠标停留在要选择的行上,按home键将鼠标停留在行首,按 ...

  6. 【跟着子迟品 underscore】JavaScript 数组展开以及重要的内部方法 flatten

    Why underscore (觉得这一段眼熟的童鞋可以直接跳到正文了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...

  7. .NET 常用框架

    1.Hangfire 2.Lucene.Net 3.Log4Net 4.Quartz.Net 5.Autofac 6.SqlSugar 7.NPOI 8.Senparc.Weixin.MP 9.Aut ...

  8. linux-ntpdate同步更新时间

    Linux服务器运行久时,系统时间就会存在一定的误差,一般情况下可以使用date命令进行时间设置,但在做数据库集群分片等操作时对多台机器的时间差是有要求的,此时就需要使用ntpdate进行时间同步 安 ...

  9. 解决 Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in

    转载 php 5个版本,5.2.5.3.5.4.5.5,怕跟不上时代,新的服务器直接上5.5,但是程序出现如下错误:Deprecated: mysql_connect(): The mysql ext ...

  10. css-css权威指南学习笔记5

    第六章 文本属性 1.text-indent只能作用于块级元素(如p或inline-block或block后的span/a/i等). 2.text-align只能作用于块级元素(如p或inline-b ...