Question

我需要帮助才能获得我创建的背景滑块，如果我在网站上切换页面只保持状态并保持滑动，则从头开始不重置。

我的代码：

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

提前感谢你的消遣！

Answer 1

您可以使用Cookie来存储临时数据，例如当前图片ID，并在每次加载页面时将其还原。如果您想使用jQuery，可以直接连接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，但它的效果可能不太有效），并且它还将负责切换背景（主要优点是使用服务器是它可以在会话中，或者在数据库中，为所有连接的客户端的后台更改提供服务。

保持页面重载/页面切换的背景滑块状态

1 个答案: