• 选项设置与说明

    　　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. RFID考试背诵

    简答题: 简述RFID标准多元化的原因: 由不同的技术因素.利益因素导致: 工作频率分布在低频至微波的多个频段中,频率不同,技术差异大. 作用距离的差异导致标准不同:因为应答器分为有源.无源两种工作方 ...

  2. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 外部服务调用、内部服务调用优化，面向服务化的

    现在的信息系统越来越复杂,越来越庞大,不仅需要内部是一个整体,而且还需要提供很多对外的服务调用. 1:别人如何调用最方便?用不同的开发语言调用.例如app.手持设备.服务器.2:服务的返回状态是什么样 ...

  3. Eclipse JEE 安装JBPM 4.4 GPD

    回顾往昔,发现自己好久没写博客了,想想以前自己是多么热衷于写博客分享,虽然分享的都是比较基础的东西,但每每看到访问量不断增加的时候内心还是爽爽的. 时间过的真的很快,离开学校和团队已经一个月了.来到了 ...

  4. Unix NetWork Programming(unix环境编程)——环境搭建（解决unp.h等源码编译问题）

    此配置实例亲测成功,共勉,有问题大家留言. 环境:VMware 10 + unbuntu 14.04 为了unix进行网络编程,编程第一个unix程序时遇到的问题,不能包含unp.h文件,这个感觉和a ...

  5. Centos6.5入侵清理

    今天早上来,网站打不开.通过xshell打不开终端,很久才打开.发现内存占用率高达95%,loadavg 15  16  16 现状: 负载太高     15        15            ...

  6. Java static 静态代码块执行分析

    假设有这样一个类: public class Utils { static { Log.i("static","isLoad!"); } public stat ...

  7. js打开新页面与关闭当前页面

    打开新的窗口window.open("help.html"); window.open("help.html"); 关闭页面<a href="j ...

  8. 开发haproxy管理平台

    1.说明:该脚本仅适用于Linux操作系统2.使用方法: 在该脚本同级目录下要创建一个名字叫做 haproxy 的文件 haproxy 文件内容如下 global log 127.0.0.1 loca ...

  9. 【51Nod 1674】【算法马拉松 19A】区间的价值 V2

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1674 对区间分治,统计\([l,r]\)中经过mid的区间的答案. 我的 ...

  10. C# 6.0 新特性

    1.C# 6.0 示例 1: 自动属性支持初始化, 字符串嵌入的新方式, 通过 Using Static 引用静态类, nameof 表达式CSharp6/Demo1.xaml.cs /* * C# ...