Status des Hintergrund-Schiebereglers bei Neuladen der Seite beibehalten/Seite wechseln

Ich brauche Hilfe, um einen Hintergrund-Schieberegler zu erhalten, den ich erstellt habe, um nicht von Anfang an zurückzusetzen, wenn ich die Seiten auf einer Seite ändere.Status des Hintergrund-Schiebereglers bei Neuladen der Seite beibehalten/Seite wechseln

Mein Code:

<script> 
    jQuery(function() 
    { 
     var body = jQuery('body'); 
     var backgrounds = 
     [ 
     'url(bg1.jpg)', 
     'url(bg2.jpg)', 
     'url(bg3.jpg)', 
     'url(bg4.jpg)' 
     ]; 
     var current = 0; 

     function nextBackground() 
     { 
      body.css('background', backgrounds[current = ++current % backgrounds.length]); 

      setTimeout(nextBackground, 10000); 
     } 
     setTimeout(nextBackground, 10000); 
     body.css('background', backgrounds[0]).fadeIn(3000); 
    }); 
    console.log('testing'); 
</script>

Vielen Dank im Voraus für Ihre sugestions!

Quelle

2017-01-07 Boris Agatić

Sie können localstorage verwenden, um den Status beizubehalten und später von einer anderen Seite abzurufen. – 31piy

Soweit localStorage verwendet wird, ist der Ansatz zweigeteilt: 1. Wenn das DOM geladen wird, rufen Sie den aktuell gespeicherten Hintergrund aus Ihrem Speicher ab, falls vorhanden, oder verwenden Sie den ersten Hintergrund, falls nicht 2. Jedes Mal, wenn Sie einen Hintergrund aktualisieren Speichern Sie es auch in den Speicher. – nem035

Sie können Cookies verwenden, um temporäre Daten wie die aktuelle Bild-ID zu speichern und sie bei jedem Laden der Seite wiederherzustellen. Wenn Sie jQuery verwenden möchten, schließen Sie können Sie direkt Cookie plugin

$(function() { 
    var body = $('body'); 
    var backgrounds = ['url(http://gallery.photo.net/photo/6154536-lg.jpg)', 
    'url(http://gallery.photo.net/photo/8492321-md.jpg)', 'url(http://gallery.photo.net/photo/5674653-lg.jpg)', 
    'url(http://gallery.photo.net/photo/6597417-md.jpg)']; 
    var current = $.cookie('backSlider') != null?$.cookie('backSlider') :0;; 

    function nextBackground() { 
     body.css('background', backgrounds[current = ++current % backgrounds.length]); 

     setTimeout(nextBackground, 10000); 
     $.cookie('backSlider', current); 
    } 

    setTimeout(nextBackground, 10000); 
    body.css('background', backgrounds[current]).fadeIn(3000); 
}); 
console.log('testing');

Es Kollisionen werden kann, wenn zwei Seiten mit dem gleichen Code geladen werden synchron

Die andere Variante der Lösung zur Verhinderung von Kollisionen ist Server zu verwenden, der mit jedem Client über Sockets verbunden wird (oder setInterval ajax, aber es kann weniger effektiv sein), und es wird auch verantwortlich für den Hintergrundwechsel (der Hauptvorteil der Verwendung von Server ist, dass es alles in Sitzung oder, darüber hinaus, in der Datenbank, um den Hintergrund zu beeinflussen, der sich für alle t ändert er Kunden jemals verbunden).

Quelle

2017-01-07 08:46:12 impulsgraw

Status des Hintergrund-Schiebereglers bei Neuladen der Seite beibehalten/Seite wechseln

Antwort

Verwandte Themen