Question

我正在开发一个jquery移动应用程序，我想要实现的是：当页面保持空闲状态3秒时，它应该自动从page1移动到page2，当你在第2页时它仍然处于空闲状态它应该移动到第3页，依此类推，然后第四步。有人可以用脚本帮我。

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>

这是我的页面的小提琴

http://jsfiddle.net/91wu20fr/

Answer 1

您可以使用简单的setTimeout：

var goToNextPage = setTimeout(function () {
  location.href = 'page2.html';
}, 3000);

在JavaScript中：

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

当鼠标移动或按下键时，此脚本实质上会重置计时器。由于您使用的是移动设备，请将这两个设备替换为用户可以触发的所有事件，例如滚动，触摸，等等等等，这应该适合您。

如果页面空闲，则自动移至下一页

1 个答案: