Question

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

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/

Answer 1

我猜你需要使用sessionStorage。

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

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

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

Answer 2

由于你必须更改页面加载上的滑块，这显然意味着你需要有数据告诉你在最后一页加载时显示的滑块。这可以通过3种方式完成

1）作为哈希添加到网址 - 不建议用户可以尝试重新加载而不使用哈希

2）使用Cookie保存数据

3）使用localStorage保存数据 - 我用过它。

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

JS

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

});

如何使JQuery滑块仅在Page Reload上更改幻灯片

2 个答案: