如何使頁面上的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

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