Przechodzenie do następnej i następnej strony, gdy strona jest bezczynna przez 3 sekundy na każdej stronie.

Czy ktoś może mi pomóc przyjść ze skryptem, który automatycznie porusza się pomiędzy stronami, gdy strona jest bezczynna przez 3 sekundy? Obecnie z tym, co mam, może przejść tylko z jednej strony na drugą, ale mam 4 strony, które chciałbym, aby wpłynęły na to wszystko.Przechodzenie do następnej i następnej strony, gdy strona jest bezczynna przez 3 sekundy na każdej stronie.

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); 
    }); 
});

Źródło

2015-12-16 i_user

Edycja Updated

Uwaga, div nie jest ważny elementem podrzędnym p elementu. Usunięto p elementy, które były rodzice div elementu

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>

Jeśli hash z location rozpoczyna się #page1 przydałby Number(), String.prototype.slice() aby zwiększyć stron przy użyciu istniejących js.

definiowany mousemove, keypress obsługi zdarzenia w funkcji o nazwie podstawiony .one() do .on() zapobiec obsługi wzywany w każdym przypadku mousemove; zdefiniowane goToNextPage zmienną zewnętrzną z .one() obsługi

$(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); 
});

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

Źródło

2015-12-16 07:21:55 guest271314

jej przypuszczać, aby czekać na niektórych kilka sekund przed spustem działanie. możesz to skrzywdzić? –

_ "Obecnie z tym, co mam, można przenosić tylko z jednej strony na drugą" _ Tak, czy istniejące 'js' w pytaniu nawigują od' # page1' do '# page2'? – guest271314

z moim js, otrzymuję ten błąd "Uncaught ReferenceError: goToNextPage nie jest zdefiniowany" –

Przechodzenie do następnej i następnej strony, gdy strona jest bezczynna przez 3 sekundy na każdej stronie.

Odpowiedz

Powiązane problemy