javascript - 幻灯片 - 连续循环

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

戴夫， 幻灯片“乒乓”的原因是

$("#slideshow-scroller").animate({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();}
 }

这是它的工作原理:

每个元素在需要时都隐藏在屏幕外。

按下按钮时，

确定必须一起移动的两个图像。

他们的位置已经确定，所有其他人再次隐藏在屏幕外。

它们会移动到新的位置。

我还转换了您的大部分索引测试，使它们从零开始，这是大多数现代语言喜欢解释集合索引的方式。

仅供引用，我希望 totalSlides 增加到 2，但它增加到 3，所以将它设置为 -1 感觉很糟糕——可能是一个不同的循环结构要求什么的。

另外，买者自负 - 我没有在 Firefox 以外的任何设备上测试过这个，所以你的里程可能会有所不同。