2017-01-07 7 views
0

サイトのページを切り替えるだけで状態を保持して滑り続けると、最初からリセットしないように作成したバックグラウンドスライダを取得するのに助けが必要です。バックグラウンドスライダの状態をページリロード/ページスウィッチに保つ

マイコード:あなたのsugestionsを事前に

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

ありがとう!

+0

localstorageを使用して状態を保持し、後で別のページから取得することができます。 – 31piy

+0

localstorageを使用する限り、アプローチは2倍です: 1. DOMがロードされると、現在保存されているバックグラウンドが存在する場合はそれを取り出し、 の場合は最初のバックグラウンドを使用します。2.バックグラウンドを更新するたびにそれをストレージにも保存します。 – nem035

答えて

0

クッキーを使用して、現在の画像IDなどの一時的なデータを保存し、各ページの読み込みを元に戻すことができます。あなたはjQueryのを使用する場合は、直接、同じコードを持つ2つのページが衝突を防止するためのソリューションの他の変異体である同期


ロードされている場合、衝突が存在することができ 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'); 

を接続することができ(またはsetInterval ajaxを使用して各クライアントに接続されますが、それほど効果的ではありません)また、バックグラウンドの切り替えも担当します(サーバーを使用する主な利点は、セッション、またはさらにデータベース内で、すべてのtのバックグラウンド変更に影響する彼はクライアントに接続しています)。

関連する問題