Passa alle pagine successive e secondarie quando la pagina è inattiva per 3 secondi su ogni pagina

Qualcuno mi può aiutare con uno script che si sposta automaticamente tra una pagina e l'altra quando la pagina è inattiva per 3 secondi? Attualmente con quello che ho può solo passare da una pagina all'altra, ma sto avendo 4 pagine che vorrei che interessasse tutto.Passa alle pagine successive e secondarie quando la pagina è inattiva per 3 secondi su ogni pagina

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

fonte

2015-12-16 i_user

Modifica, aggiornato

Nota, div non è elemento figlio valida p elemento. Rimossi p elementi che erano i genitori di div elemento

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>

Se hash di location inizia alle #page1 potrebbe usare Number(), String.prototype.slice() per incrementare le pagine utilizzando risorse esistenti js.

definito mousemove, keypress gestore eventi come funzione denominata, sostituito .one() per .on() impedire gestore essere chiamato ad ogni evento mousemove; definiti goToNextPage esterno variabile della .one() gestore

$(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

fonte

2015-12-16 07:21:55 guest271314

sua supponiamo di attendere qualche qualche secondo prima di attivare l'azione. puoi giocherellare? –

_ "Attualmente con quello che ho può solo spostarsi da una pagina all'altra" _ Sì, il js esistente su Domanda naviga da '# pagina1' a' # pagina2'? – guest271314

con my js, ottengo questo errore "Uncaught ReferenceError: goToNextPage non definito" –

Passa alle pagine successive e secondarie quando la pagina è inattiva per 3 secondi su ogni pagina

risposta

Problemi correlati