当页面在每页上空闲3秒时，移动到下一页和后续页

Move to next and subsquent pages when page is idle for 3 seconds on each page

本文关键字：移动 一页 3秒时      更新时间：2023-09-26

当页面空闲3秒时，有人能帮我提供一个自动在页面之间移动的脚本吗？目前，我所拥有的只能从一个页面移动到另一个页面，但我有4个页面，我希望它能影响所有页面。

HTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    </head>
    <body>
    <div data-role="page" id="page1">
      <div data-role="header">
        <h1>Page1</h1>
      </div>
      <div data-role="content">This is page 1</div>
      <div data-role="footer">
        <h4>Footer</h4>
      </div>
    </div>
    <p>&nbsp;
    <div data-role="page" id="page2">
      <div data-role="header">
        <h1>Page 2</h1>
      </div>
      <div data-role="content">This is page 2</div>
      <div data-role="footer">
        <h4>Footer</h4>
      </div>
    </div>
    </p>
    <p>&nbsp;
    <div data-role="page" id="page3">
      <div data-role="header">
        <h1>Page 3</h1>
      </div>
      <div data-role="content">This is page 3</div>
      <div data-role="footer">
        <h4>Footer</h4>
      </div>
    </div>
    <p>&nbsp;
    <div data-role="page" id="page4">
      <div data-role="header">
        <h1>Page 4</h1>
      </div>
      <div data-role="content">This is page 4</div>
      <div data-role="footer">
        <h4>Footer</h4>
      </div>
    </div>
    </p>
    </body>
    </html>
Here's a fiddle to my page

http://jsfiddle.net/91wu20fr/

JQUERY

$(function () {
  $(document).on("mousemove keypress", function () {
    clearTimeout(goToNextPage);
    goToNextPage = setTimeout(function () {
      location.href = '#page2';
    }, 3000);
  });
});

编辑、更新

注意，div不是p元素的有效子元素。去除了作为div元素亲本的p元素

html

<!DOCTYPE html>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
<script src="script.js"></script>   
<body>
  <div data-role="page" id="page1">
    <div data-role="header">
      <h1>Page1</h1>
    </div>
    <div data-role="content">This is page 1</div>
    <div data-role="footer">
      <h4>Footer</h4>
    </div>
  </div>
  <div data-role="page" id="page2">
    <div data-role="header">
      <h1>Page 2</h1>
    </div>
    <div data-role="content">This is page 2</div>
    <div data-role="footer">
      <h4>Footer</h4>
    </div>
  </div>
  <div data-role="page" id="page3">
    <div data-role="header">
      <h1>Page 3</h1>
    </div>
    <div data-role="content">This is page 3</div>
    <div data-role="footer">
      <h4>Footer</h4>
    </div>
  </div>
  <div data-role="page" id="page4">
    <div data-role="header">
      <h1>Page 4</h1>
    </div>
    <div data-role="content">This is page 4</div>
    <div data-role="footer">
      <h4>Footer</h4>
    </div>
  </div>
</body>
</html>

如果location的hash从#page1开始，则可以使用Number()、String.prototype.slice()来使用现有的js来增加页面。

将mousemove、keypress事件处理程序定义为命名函数，将.on()替换为.one()，以防止在每个mousemove事件调用处理程序；在.one()处理程序之外定义的goToNextPage变量

js

$(function() {
  location.href = "#page1"
  var goToNextPage = null;
  function updatePage(event) {
    console.log(event)
    var currentPage = Number(location.hash.slice(-1));
    // if `currentPage` is less than 4
    if (currentPage !== 4) {
      goToNextPage = setTimeout(function() {
        if ((currentPage + 1) <= 4) {
          // set `location.href` to `#page` + `currentPage` + `1`
          location.href = "#page" + (currentPage + 1);
          console.log(location.hash);
          // reset event handlers
          $(document).one("mousemove keypress", updatePage);
        } 
      }, 3000);
    } else {
        clearTimeout(goToNextPage)
    }
  }
  $(document).one("mousemove keypress", updatePage);
});

plnkrhttp://plnkr.co/edit/tunX9CjEqNEZWxoxXU1b?p=preview

相关文章：