• 选项设置与说明

    　　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. [转]用Whois获得电信运营商的IP地址是如何分配的?

    [转]用Whois获得电信运营商的IP地址是如何分配的? Linux下获得一些中国电信运营商的IP地址分配情况: APNIC是管理亚太地区IP地址分配的机构,它有着丰富准确的IP地址分配库,同时这些信 ...

  2. SecureCRT连接虚拟机（ubuntu）配置

    使用SecureCRT连接虚拟机(ubuntu)配置记录   这种配置方法,可以非常方便的操作虚拟机里的Linux系统,且让VMware在后台运行,因为有时候我直接在虚拟机里操作会稍微卡顿,或者切换速 ...

  3. NPOI导出Excel合并表头写入公式

    protected void Btn1_Click(object sender, EventArgs e) { //建立空白工作簿 IWorkbook workbook = new HSSFWorkb ...

  4. 解决Scala Play框架在Git Bash运行的异常：Could not find configuration file ../framework/sbt/sbt.boot.properties

    Git Bash+ConEmu可以模拟Linux强大的命令行.不过在结合Scala和Play时,需要注意如下事项: 1. Scala的安装在64位操作系统下,默认会放在“C:\Program File ...

  5. iOS下的按钮css去除原生样式

    IOS环境下的按钮都是经过美化的,但通常我们在设计web app的时候不需要这些看上去老土的样式,所以,去除这些显得很有必要. 下面这句代码就是重置这些样式的: input[type=button]{ ...

  6. MySQL 常用的sql语句小结（待续）

    mysql 常用的sql语句 1.查看数据库各个表中的记录数 USE information_schema; SELECT table_name,table_rows FROM tables WHER ...

  7. 【swift学习笔记】三.使用xib自定义UITableViewCell

    使用xib自定义tableviewCell看一下效果图 1.自定义列 新建一个xib文件 carTblCell,拖放一个UITableViewCell,再拖放一个图片和一个文本框到tableviewc ...

  8. Coding 及 git 的工程使用方法

        在过去的两周,同学们除了在学习 C 语言之外,还在学习如何利用 git 将自己的代码上传到 coding 中.也有大量的同学,成功的上传了代码.但是,实际上大部分同学的用法都不合理.这里,以一 ...

  9. 82 fsck-检查与修复 Linux 档案系统

    Linux fsck命令用于 检查与修复 Linux 档案系统,可以同时检查一个或多个 Linux 档案系统. 语法 fsck [-sACVRP] [-t fstype] [--] [fsck-opt ...

  10. iOS多线程的详情使用示例--简进祥

    大家都知道,在开发过程中应该尽可能减少用户等待时间,让程序尽可能快的完成运算.可是无论是哪种语言开发的程序最终往往转换成汇编语言进而解释成机器码来执行.但是机器码是按顺序执行的,一个复杂的多步操作只能 ...