功能如下：

1.默认加载方式为“自动播放 ”方式，即从第1屏至第5屏 页面循环加载显示，每屏每次仅显示1个页面，页面间停留时间为“10”秒
2.手动播放过程中，按数字键“1”-“5”，将直接切到指定页面，按“上下”或“左右”键将切换至 “上1屏 ”或 “下1屏”
3.自动播放过程中，按“空格” 或 鼠标点击屏幕任一处位置，均可暂停自动循播，这时可鼠标操作，如鼠标悬停显示数据等。 当再次按“空格”键，则切换到自动播放模式； 如10秒内无任何操作，则自动切换到自动播放模式

利用浏览器的setTimeout和setInterVal实现该功能

代码如下：

　　

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<title>fullPage</title>

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">

<style>

.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}

</style>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

  <script type="text/javascript" src="../jquery.fullPage.min.js"></script>

<script>

  var interVal,timer,isPlay;

$(function(){

    $('#dowebok').fullpage({

    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90',"red"],

    loopHorizontal: true,

    css3:true

    });

    $(".fp-controlArrow").remove();

  autoScoll()

  $(window).on("keyup",function (event) {

    switch (event.key) {

      case "1":

        $.fn.fullpage.moveTo(0,0)

        resetTime()

        break;

      case "2":

        $.fn.fullpage.moveTo(0,1)

        resetTime()

        break;

      case "3":

        $.fn.fullpage.moveTo(0,2)

        resetTime()

        break;

      case "4":

        $.fn.fullpage.moveTo(0,3)

        resetTime()

        break;

      case "5":

        $.fn.fullpage.moveTo(0,4)

        resetTime()

        break;

      case " ":

        isPlay?resetTime():autoScoll()

        break

    }

  })

  $(window).on("mousemove mousedown touchstart click",function (event) {

    resetTime()

  })

});

function autoScoll() {

  isPlay=true

  clearTimeout(timer);

  interVal = setInterval(function(){

    $.fn.fullpage.moveSlideRight();

  },1000)

}

function resetTime() {

  clearInterval(interVal);

  clearTimeout(timer);

  isPlay=false

  timer=setTimeout(function () {

    autoScoll();

  },3000)

}

</script>

</head>

<body>

<div id="dowebok">

    <div class="section">

    <div class="slide"><h3>第1屏</h3></div>

    <div class="slide"><h3>第2屏</h3></div>

    <div class="slide"><h3>第3屏</h3></div>

    <div class="slide"><h3>第4屏</h3></div>

    <div class="slide"><h3>第5屏</h3></div>

    </div>

</div>

</body>

</html>

基于fullpage的自动播放，手动播放，暂停页面的功能的更多相关文章

  1. 基于Qt Phonon模块实现音乐播放器

    这次使用Qt实现的是一个本地音乐播放器,可以播放下载在计算机本地的音乐,提供了添加歌曲,歌曲列表,清空列表的功能.默认歌曲列表循环播放.音乐播放的实现主要依赖的是Qt 的多媒体框架phonon.该音乐 ...

  2. 基于libvlc和wxWidgets的简单播放器代码阅读

    源代码来自 http://git.videolan.org/?p=vlc.git;a=blob_plain;f=doc/libvlc/wx_player.cpp // g++ wx_player.cp ...

  3. video自动全屏播放

    video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...

  4. apk支持html video控制 ，是播放状态就暂停，暂停状态就播放

    apk支持html video控制 <!DOCTYPE html> <html> <body> <div style="text-align:cen ...

  5. audio与video控件/标签的隐藏，iso/Android下自动全屏播放，短暂黑屏问题

    (一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...

  6. js-音乐播放器，播放|暂停|滑块的功能

    音乐播放器,播放|暂停|滑块的功能 document.addEventListener('DOMContentLoaded', function loaded(event) { var audio = ...

  7. 基于VLC库C#开发可播放摄像头及任意格式视频的播放器

    前言 本文主要讲述,在WPF中,借助Vlc.DotNet调用VLC类库,实现视频播功能,下面我们先来做开发前的准备工作. 准备工作 首先,我们创建一个项目WpfVLC,然后,进入Neget搜索Vlc. ...

  8. Android流媒体开发之路三:基于NDK开发Android平台RTSP播放器

    基于NDK开发Android平台RTSP播放器 最近做了不少android端的开发,有推流.播放.直播.对讲等各种应用,做了RTMP.RTSP.HTTP-FLV.自定义等各种协议,还是有不少收获和心得 ...

  9. vlc播放器设置开机自动全屏播放网络视频流

    因工作需要,要用vlc视频播放器实现开机自动全屏播放某个网络视频流.百度了下,说的都很模糊,经过整理,设置方法如下: 一,添加视频流地址:rtsp://wowzaec2demo.streamlock. ...

随机推荐

  1. Nginx学习总结（2）——Nginx手机版和PC电脑版网站配置

    考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...

  2. String Boot-thymeleaf使用(四)

    简介 Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本.,可以完全替代jsp,也是spring boot官方推荐 ...

  3. Basic Memory Structures

    Basic Memory Structures The basic memory structures associated with Oracle Database include: System ...

  4. spring mvc中的@propertysource

    在spring mvc中,在配置文件中的东西,可以在java代码中通过注解进行读取了: @PropertySource  在spring 3.1中开始引入 比如有配置文件 config.propert ...

  5. 去掉文本框前后的空格（JS+JQuery）

    表单验证时,需要去除文本框前后的空格才可以正确通过验证.以前看到过一句话:任何设计和代码都要对用户足够宽容. <input type="text" class="p ...

  6. windows XP下Python2.7包管理工具安装-setuptool，pip、distribute、nose、virtualenv

    在Python开发中为了对项目进行管理和调试.必须安装一些特定的软件包.据说业内这个叫做yak shaving-做一个非常酷非常绚丽的Python项目之前,必须做的一些枯燥无味的准备工作.本文介绍了s ...

  7. Myeclipse快捷键备忘

    1.编辑类 Ctrl+定义好的类名     链接到你定义好的类的窗口 Ctrl + /               为选中的一段代码加上或去掉注释符   //       (必须选中代码块) Ctrl ...

  8. Linux中的默认权限与隐藏权限（文件、文件夹）

    一个文件(或文件夹)拥有若干个属性.包含(r/w/x)等基本属性,以及是否为文件夹(d)与文件(-)或连接文件(l)等属性.此外,Linux还能够设置其它系统安全属性.使用chattr来设置.以lsa ...

  9. SQL SERVER读书笔记：阻塞与死锁

    阻塞是事务隔离带来的副作用,而并不是SQL SERVER的错. 死锁则是互相争用资源而引发.由于死锁会选择牺牲者,所以死锁的危害没有阻塞大.但有时为了解决死锁,会采取对资源加锁,导致阻塞的方式来避免.

  10. nyoj--745--蚂蚁的难题（二）

    蚂蚁的难题(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 下雨了,下雨了,蚂蚁搬家了. 已知有n种食材需要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种食材 ...