• 选项设置与说明

    　　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. python基础之文件读写

    python基础之文件读写 本节内容 os模块中文件以及目录的一些方法 文件的操作 目录的操作 1.os模块中文件以及目录的一些方法 python操作文件以及目录可以使用os模块的一些方法如下: 得到 ...

  2. Dubbo消费端错误: ClassNotFoundException: org.apache.zookeeper.proto.WatcherEvent

    出现错误的原因是消费端war没有启动成功, 但是zkClient和Dubbo的对应Thread启动了, web container无法加载对应的类, INFO: Initializing Protoc ...

  3. [CareerCup] 2.5 Add Two Numbers 两个数字相加

    2.5 You have two numbers represented by a linked list, where each node contains a single digit. The ...

  4. 大流量网站性能优化：一步一步打造一个适合自己的BigRender插件

    BigRender 当一个网站越来越庞大,加载速度越来越慢的时候,开发者们不得不对其进行优化,谁愿意访问一个需要等待 10 秒,20 秒才能出现的网页呢? 常见的也是相对简单易行的一个优化方案是 图片 ...

  5. UML——在Visual Studio 2013/2015中设计UML类图

    1.UML简介 Unified Modeling Language (UML)又称统一建模语言或标准建模语言. 简单说就是以图形方式表现模型,根据不同模型进行分类,在UML 2.0中有13种图,以下是 ...

  6. 如何对多个属性进行transform

    w3school对transform的介绍很简单 transform: none|transform-functions; transform的默认值是none 其所举的例子也只是对一个值进行过渡,其 ...

  7. duilib学习 --- 360demo 学习

    我想通过360demo的学习,大概就能把握duilib的一般用法,同时引申出一些普遍问题,和普遍解决方法.并在此分享一些链接和更多内容的深入学习..... 原谅我是一个菜鸟,什么都想知道得清清楚楚.. ...

  8. POSIX字符集

    [. .] 排序元素 [= =] 等价元素 类别   匹配字符 [:alnum:] 数字字符 [:alpha:]  字母字符 [:blank:]  空格与制表符 [:cntrl:] 控制字符 [:di ...

  9. Pycharm 输出中文或打印中文乱码现象的解决办法

    1. 确保文件开头加上以下代码: # -*- coding:utf-8 -*- 还可以加上 import sys reload(sys) sys.setdefaultencoding('utf-8') ...

  10. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...