如何仅在页面重新加载时使 JQuery 滑块更改幻灯片答案

【问题标题】：How to make JQuery slider change slides on Page Reload only如何仅在页面重新加载时使 JQuery 滑块更改幻灯片
【发布时间】：2013-12-23 17:34:02
【问题描述】：

我正在为客户处理的项目中有一个无序列表滑块。最初，客户只想要一个普通的旧式渐变滑块，它会自动循环。没问题。现在客户回到我身边并询问我是否可以做到，所以如果用户重新加载或刷新页面，滑块只会循环到下一张幻灯片。原代码如下：

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/

【问题讨论】：

你能更新fiddle中的代码吗
我刚刚在帖子中添加了小提琴

标签： jquery slider

【解决方案1】：

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

1) 作为散列添加到 URL 中 - 不推荐，因为用户可以尝试不使用散列重新加载

2) 使用cookie保存数据

3) 使用 localStorage 保存数据 - 我用过这个。

演示 - 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();

});

【讨论】：

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

【解决方案2】：

我猜你需要使用 sessionStorage。

http://www.w3schools.com/html/html5_webstorage.asp

因此，如果您在 sessionStorage 中存储一个变量，指示该页面已被查看了多少次。 Onload你可以检查这个变量，然后根据变量值旋转到合适的视图。

还应提及如果您需要支持不支持 html5 的浏览器，那么您可能不得不求助于会话 cookie。这将非常相似，但存储会有所不同。

【讨论】：