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

我在为客户工作的项目中有一个无序列表滑块。最初，客户机只需要一个普通的、旧的、自动循环的淡入淡出滑块。没问题。现在，客户机回到我身边，询问我是否可以完成，这样，如果用户重新加载或刷新页面，滑块只会循环到下一张幻灯片。原始代码如下：

HTML:

原始淡入滑块的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);

});

你能给我的任何帮助都会很好。提前谢谢

---

这就是它目前的工作方式：

我想您需要使用sessionStorage

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

---

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

由于您必须更改页面加载上的滑块，这显然意味着您将需要有数据来告诉您上次页面加载中显示的滑块。 这可以通过三种方式实现

1） 以散列方式添加到URL中-不建议这样做，因为用户可以尝试在不使用散列的情况下重新加载

2） 使用cookie保存数据

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

演示-

JS

---

你能更新fiddle中的代码吗？我刚把fiddle添加到postThank中，我在答案中添加了一些文字

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

$(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);

});

$(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();

});