基于fullpage的自动播放，手动播放，暂停页面的功能

功能如下：

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>

 

posted @ 2018-09-06 17:52  many-object  阅读(1272)  评论(0)  编辑  收藏  举报