幻燈片放映 - 連續循環

Question

任何幫助，將非常感謝！

我試圖從執行該腳本：

www.switchonthecode.com/tutorials/jquery-creating-a-slideshow

但我想它喜歡不斷循環，我已經成功地得到它的迴環往復：

var totalSlides = 0; 
var currentSlide = 1; 
var contentSlides = ""; 

$(document).ready(function(){ 
    $("#slideshow-previous").click(showPreviousSlide); 
    $("#slideshow-next").click(showNextSlide); 

    var totalWidth = 0; 
    contentSlides = $(".slideshow-content"); 
    contentSlides.each(function(i){ 
    totalWidth += this.clientWidth; 
    totalSlides++; 
    }); 
    $("#slideshow-holder").width(totalWidth); 
    $("#slideshow-scroller").attr({scrollLeft: 0}); 
    updateButtons(); 
}); 

function showPreviousSlide() 
{ 
    currentSlide--; 
    if (currentSlide < 1) currentSlide = totalSlides; 
    updateContentHolder(); 
    updateButtons(); 
} 

function showNextSlide() 
{ 
    currentSlide++; 
    if (currentSlide > totalSlides) currentSlide = 1; 
    updateContentHolder(); 
    updateButtons(); 
} 

function updateContentHolder() 
{ 
    var scrollAmount = 0; 
    contentSlides.each(function(i){ 
    if(currentSlide - 1 > i) { 
     scrollAmount += this.clientWidth; 
    } 
    }); 
    $("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000); 
} 

function updateButtons() 
{ 
if(currentSlide < totalSlides) { 
    $("#slideshow-next").show();} 

if(currentSlide > 1) { 
    $("#slideshow-previous").show();} 
} 

我一直在看這個2晚，現在不能解決它。

任何人都可以請幫忙嗎？

在此先感謝。

Answer 1

我不得不從頭開始創建類似於ExtJS的工作，我詢問了包含我最終使用的JavaScript源代碼的this question，但最終它基於jquery.slideShow和Marcel Eichner。事實證明，相當容易'滾動我自己'，可以這麼說，但有很多jQuery選項供您嘗試。

希望這會有所幫助！

Answer 2

戴夫， 的幻燈片 '平pongs' 是原因，

$（ 「＃幻燈滾動」），動畫（{scrollLeft：scrollAmount}，1000）;

剛剛點回到原來的位置，當你打到結束，所以動畫回到那裏。

試試這個：

CSS的變化正是如此

.slideshow-content { 
    float: left; 
    position: absolute; 
} 

JavaScript的改變正是如此

// it's nice to work with 0 indexed counters 
var totalSlides = -1; 
var currentSlide = 0; 
var contentSlides = ""; 

$(document).ready(function(){ 
    $("#slideshow-previous").click(showPreviousSlide); 
    $("#slideshow-next").click(showNextSlide); 

    var totalWidth = 0; 
    contentSlides = $(".slideshow-content"); 
    contentSlides.each(function(i){ 
    totalSlides++; 
    //each element is hidden until needed 
    $(this).css('left', -100000); 
    }); 

    //set the position of the first slide 
    $(contentSlides[0]).css('left', 0); 

    updateButtons(); 
}); 

function showPreviousSlide() 
{ 
    updateSlides(-1); 
    currentSlide--; 
    if (currentSlide < 0) currentSlide = totalSlides; 
    updateButtons(); 
} 

function showNextSlide() 
{ 
    updateSlides(1); 
    currentSlide++; 
    if (currentSlide > totalSlides) currentSlide = 0; 
    updateButtons(); 
} 

function updateSlides(direction) 
{ 
    var scrollAmount = 0; 

    var currSlideObj = contentSlides[ currentSlide ];  
    var nextSlideObj = contentSlides[ getNextSlide(direction) ]; 

    $(contentSlides).each(function(){ 
     if (this != currSlideObj && this != nextSlideObj) { 
      //each element is hidden until needed 
      $(this).css('left', -100000); 
     } 
    }); 

    if (direction > 0) { 
     //set the position of the next slide when 'next' pushed 
     $(nextSlideObj).css('left', parseInt($(currSlideObj).css('left')) + $(currSlideObj).width()); 
     //set the amount to animate 
     scrollAmount = parseInt($(currSlideObj).css('left')) - $(currSlideObj).width(); 
    } else { 
     //set the position of the next slide when 'previous' pushed 
     $(nextSlideObj).css('left', parseInt($(currSlideObj).css('left')) - $(nextSlideObj).width()); 
     //set the amount to animate 
     scrollAmount = parseInt($(currSlideObj).css('left')) + $(currSlideObj).width(); 
    } 

    // we'll animate the slide objects independently 
    $(currSlideObj).animate({left: scrollAmount}, 1000); 
    $(nextSlideObj).animate({left: 0}, 1000); 

} 

function getNextSlide(direction) 
{ 
    if ((currentSlide + direction) > totalSlides) { 
     return 0; 
    } else if ((currentSlide + direction) < 0) { 
     return totalSlides;  
    } 

    return currentSlide + direction; 

} 

function updateButtons() 
{ 
if(currentSlide < totalSlides) { 
    $("#slideshow-next").show();} 

if(currentSlide > 0) { 
    $("#slideshow-previous").show();} 
} 

這裏是它如何工作的：

每個元素都被隱藏屏幕外，直到它的需要。

當按下按鈕時，

必須確定必須一起移動的兩個圖像。

他們的位置已設置，並且所有其他位置都會再次隱藏在屏幕外。

他們被動畫到新的位置。

我也轉換了大部分索引測試，以便它們基於零，這是大多數現代語言喜歡解釋集合索引的方式。 FYI，我預計totalSlides會增加到2，但是它會增加到3, ，所以將它設置爲-1會感覺不舒服 - 可能需要調用不同的循環結構 或其他東西。

另外，警告emptor - 我還沒有測試過這個，除了Firefox，所以你的里程可能會有所不同。