幻灯片放映 - 连续循环

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，所以你的里程可能会有所不同。