如何使页面上的JQuery滑块更改幻灯片仅刷新

我正在为客户端工作的项目中有一个无序列表滑块。最初，客户只想要一个简单的旧衰落滑块，自动循环。没问题。现在，客户端回到我身边，询问我是否可以创建它，以便用户重新加载或刷新页面时，滑块仅循环到下一张幻灯片。原代码如下：如何使页面上的JQuery滑块更改幻灯片仅刷新

HTML：

<ul class="fader"> 
    <li>Slider content goes here</li> 
    <li>Slider content goes here</li> 
    <li>Slider content goes here</li> 
</ul>

CSS：

div.singleColumn div.leftColumn ul.fader { 
    width: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    position: relative; 
    height: 340px; 
} 

div.singleColumn div.leftColumn ul.fader li { 
    padding: 0px !important; 
    background: none !important; 
    font-size: 10px; 
}

JQuery的原始褪色滑块：

$(function() { 
    $('ul.fader li:not(:first)').hide(); 
    $('ul.fader li').css('position', 'absolute'); 
    $('ul.fader li').css('top', '0px'); 
    $('ul.fader li').css('left', '0px'); 

    var pause = false; 

    function fadeNext() { 
     $('ul.fader li').first().fadeOut().appendTo($('ul.fader')); 
     $('ul.fader li').first().fadeIn(); 
    } 

    $('ul.fader').hover(function() { 
     pause = true; 
    },function() { 
     pause = false; 
    }); 

    function doRotate() { 
     if(!pause) { 
      fadeNext(); 
     }  
    } 

    var rotate = setInterval(doRotate, 5000); 

});

任何帮助你能给我会大。提前致谢。

这是它目前是如何工作的：http://jsfiddle.net/6LJzN/

来源

2013-12-23 user2667908

您可以更新小提琴 –

代码我刚添加的小提琴后 – user2667908

由于您必须更改页面加载的滑块，这显然意味着您需要具有数据以告诉您在上次加载页面时显示哪个滑块。可通过3种方式

1）添加到URL哈希做 - 不推荐，因为用户可以尝试重新载入没有哈希

2）使用cookie来保存数据

3）使用localStorage保存数据 - 我使用了这个。

DEMO - http://jsfiddle.net/6LJzN/1/

$(function() { 
    $('ul.fader li').hide(); 
    $('ul.fader li').css('position', 'absolute'); 
    $('ul.fader li').css('top', '0px'); 
    $('ul.fader li').css('left', '0px'); 

    var max = $('ul.fader li').length; 

    function showSlider() { 

     if(localStorage.slider) { 
      $('.fader').find('li:nth('+localStorage.slider+')').fadeIn(); 
      localStorage.slider = parseInt(localStorage.slider,10) + 1; 
      if(localStorage.slider >= max) localStorage.slider=0; 
     }else{ 
      $('.fader').find('li:nth(0)').fadeIn(); 
      localStorage.slider=1; 
     } 
    } 

    showSlider(); 

});

来源

2013-12-23 18:44:28

太感谢你了！这工作完美无瑕！ – user2667908

谢谢，我在答案中添加了一些文字 –