Question

有人可以帮助我使用脚本在页面空闲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);
  });
});

Answer 1

修改，更新

注意，div不是p元素的有效子元素。已删除p元素

父项的div个元素

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>

如果hash的{{1}}开始于location，可以使用#page1，Number()使用现有的String.prototype.slice()来增加网页。

将js，mousemove事件处理程序定义为命名函数，将keypress替换为.one()，以防止在每个.on()事件中调用处理程序;在mousemove处理程序

之外定义goToNextPage变量

JS

.one()

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

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

1 个答案: