jQuery滑塊連續滑動

Question

您好，我有一個使用來自另一個stackoverflow問題的jquery的滑塊提琴

http://jsfiddle.net/mjaA3/2506/

target = $('ul.triggers li.selected').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);

我想要得到的就是將這個滑塊變成連續滑塊，而在結束后不回到第一項

我希望有人可以向我解釋如何進行克隆，因為我不了解這個想法

ps不需要任何滑塊我需要代碼，因為我正在構建自定義

先感謝您

Answer 1

我已經更新了您的小提琴 ，使其仍然可以繼續播放，因此，如果您單擊幻燈片，它將繼續進行滑塊，否則不會循環播放。

關鍵代碼是sliderTiming()函數：

if (target < lastElem) {
    sliderResponse(++target);
}

這意味着只有在當前幻燈片不是最后一張幻燈片時，才會發生sliderResponse （觸發幻燈片）。

++target意思是“向目標添加1，然后在上下文中使用它”（在上下文中，它將作為參數傳遞）。

Answer 2

好吧，看來您的意思是無限滾動條。 我很快嘗試並成功

http://jsfiddle.net/samirkumardas/yznfmLs9/5/

一些事情：

1. 對於無限滾動器，最好使用全局變量來維護current幻燈片編號。 為簡單起見，我使用了auto_target而不是您的variable target 。
2. 方法是復制第一個1或2個幻燈片（取決於蒙版寬度），並將其附加到滑塊容器的末尾（附加到UL）
3. 當滑塊到達最后一張幻燈片時，將滑塊移到重復的幻燈片上，並假裝（突出顯示快速導航）滑塊在位置0（因為重復的滑塊與第一張幻燈片相同）
4. 當current滑塊數大於滑塊總數（LI）時，將滑塊（UL）的left位置設置為0，並將target滑塊設置為1，因為我們已經使用重復的方法顯示了第一個滑塊

希望它會有所幫助。

 var triggers = $('ul.triggers li'); var images = $('ul.images li'); var lastElem = triggers.length - 1; var mask = $('.mask ul.images'); var imgWidth = images.width(); var target = 0; var auto_target = 0; var mask_width = 340; var slids_at_a_time = Math.ceil(mask_width / imgWidth); triggers.first().addClass('selected'); mask.css('width', imgWidth * (lastElem + 1 + slids_at_a_time) + 'px'); function sliderResponse(target) { mask.stop(true, false).animate({ 'left': '-' + imgWidth * target + 'px' }, 300); triggers.removeClass('selected').eq(target % images.size()).addClass('selected'); } triggers.click(function() { alert('not impletement'); }); $('.next').click(function() { alert('not impletement'); }); $('.prev').click(function() { alert('not impletement'); }); function sliderTiming() { auto_target++; if (auto_target > images.size()) { auto_target = 1; mask.css('left', 0); } sliderResponse(auto_target); } images.slice(0, slids_at_a_time).clone().appendTo(mask).addClass('duplicate'); var timingRun = setInterval(function() { sliderTiming(); }, 5000); function resetTiming() { clearInterval(timingRun); timingRun = setInterval(function() { sliderTiming(); }, 5000); } 

 body { background-color: #000; position: relative; font-size: 14px; font-family: arial; } .mask { float: left; margin: 40px; width: 340px; height: 266px; overflow: hidden; } ul.images { position: relative; top: 0px; left: 0px; } ul.images li { float: left; width: 170px; } ul.triggers { position: absolute; top: 310px; left: 80px; } ul.triggers li { float: left; margin: 0 5px; font: bold 16px arial; cursor: pointer; background-color: #ccc; color: #000; padding: 10px; list-style-type: none; } ul.triggers li.selected { background-color: red; color: #000; } .control { position: absolute; top: 380px; color: #fff; cursor: pointer; } .prev { left: 120px; } .next { left: 180px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="mask"> <ul class="images"> <li> <img width="170" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg" /> </li> <li> <img width="170" src="http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg" /> </li> <li> <img width="170" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg" /> </li> <li> <img width="170" src="http://static.ddmcdn.com/gif/sun-update-1.jpg" /> </li> <li> <img width="170" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg" /> </li> </ul> </div> <ul class="triggers"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <span class="control prev">Prev</span> <span class="control next">Next</span>