Javascript 幻灯片放映-连续循环

在此方面的任何帮助都将不胜感激

我正在尝试从以下位置实现脚本：

但我想让它不断循环，我已经设法让它来回循环：

 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();}
 }

var-totalSlides=0；
var currentSlide=1；
var=”；
$（文档）.ready（函数（）{
$（“#幻灯片放映上一页”）。单击（showPreviousSlide）；
$（“#幻灯片放映下一步”）。单击（showNextSlide）；
var totalWidth=0；
内容幻灯片=$（“.slideshow内容”）；
内容幻灯片。每个（功能（i）{
totalWidth+=this.clientWidth；
totalSlides++；
});
$（“#幻灯片支架”）.width（总宽度）；
$（“#幻灯片滚动条”）.attr（{scrollLeft:0}）；
updateButtons（）；
});
函数showPreviousSlide（）
{
当前幻灯片--；
如果（currentSlide<1）currentSlide=totalSlides；
updateContentHolder（）；
updateButtons（）；
}
函数showNextSlide（）
{
currentSlide++；
如果（currentSlide>totalSlides）currentSlide=1；
updateContentHolder（）；
updateButtons（）；
}
函数updateContentHolder（）
{
风险价值金额=0；
内容幻灯片。每个（功能（i）{
如果（当前幻灯片-1>i）{
scrollAmount+=this.clientWidth；
}
});
$（“#幻灯片滚动条”）.animate（{scrollLeft:scrollAmount}，1000）；
}
函数updateButtons（）
{
如果（当前幻灯片<总幻灯片）{
$（“#幻灯片放映下一步”）.show（）；}
如果（当前幻灯片>1）{
$（“#幻灯片放映上一页”）.show（）；}
}

我已经看了两个晚上了，没办法解决这个问题

有人能帮忙吗

---

提前感谢。

我必须从头开始创建类似的东西，使用ExtJS，我问其中包含我最终使用的JavaScript源代码，但最终它基于。可以说，“自己滚”是相当容易的，但是有很多jQuery选项供您尝试

希望这有帮助

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

$（“#幻灯片滚动条”）.animate（{scrollLeft:scrollAmount}，1000）

当你击中末端时，只需指向原始位置，然后在那里设置动画

试试这个：

css的变化如此之大

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

// 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();}
 }

javascript的变化如此之大

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

// 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();}
 }

//使用0个索引计数器很好
var totalSlides=-1；
var currentSlide=0；
var=”；
$（文档）.ready（函数（）{
$（“#幻灯片放映上一页”）。单击（showPreviousSlide）；
$（“#幻灯片放映下一步”）。单击（showNextSlide）；
var totalWidth=0；
内容幻灯片=$（“.slideshow内容”）；
内容幻灯片。每个（功能（i）{
totalSlides++；
//每个元素在需要之前都是隐藏的
$（this.css（'left'，-100000）；
});
//设置第一张幻灯片的位置
$（contentSlides[0]）.css（'left'，0）；
updateButtons（）；
});
函数showPreviousSlide（）
{
更新滑块（-1）；
当前幻灯片--；
如果（currentSlide<0）currentSlide=totalSlides；
updateButtons（）；
}
函数showNextSlide（）
{
更新滑块（1）；
currentSlide++；
如果（currentSlide>totalSlides）currentSlide=0；
updateButtons（）；
}
函数更新滑动（方向）
{
风险价值金额=0；
var currSlideObj=contentSlides[currentSlide]；
var nextSlideObj=contentSlides[getNextSlide（方向）]；
$（内容幻灯片）。每个（函数（）{
if（this！=currSlideObj&&this！=nextSlideObj）{
//每个元素在需要之前都是隐藏的
$（this.css（'left'，-100000）；
}
});
如果（方向>0）{
//按下“下一步”时设置下一张幻灯片的位置
$（nextSlideObj）.css（'left'，parseInt（$（currSlideObj）.css（'left'））+$（currSlideObj.width（））；
//设置要设置动画的数量
scrollAmount=parseInt（$（currSlideObj.css（'left'））-$（currSlideObj.width（）；
}否则{
//设置按下“上一张”时下一张幻灯片的位置
$（nextSlideObj.css（'left'，parseInt（$（currSlideObj.css（'left'））-$（nextSlideObj.width（））；
//设置要设置动画的数量
scrollAmount=parseInt（$（currSlideObj.css（'left'））+$（currSlideObj.width（）；
}
//我们将独立设置幻灯片对象的动画
$（currSlideObj）.animate（{left:scrollAmount}，1000）；
$（nextSlideObj）.animate（{left:0}，1000）；
}
函数getNextSlide（方向）
{
如果（（当前幻灯片+方向）>总幻灯片）{
返回0；
}否则如果（（当前滑动+方向）<0）{
返回幻灯片；
}
返回电流滑动+方向；
}
函数updateButtons（）
{
如果（当前幻灯片<总幻灯片）{
$（“#幻灯片放映下一步”）.show（）；}
如果（当前幻灯片>0）{
$（“#幻灯片放映上一页”）.show（）；}
}

下面是它的工作原理：

每个元素都隐藏在屏幕外，直到需要时才显示出来

当按下按钮时

必须一起移动的两个图像被识别

他们的位置已经设置好，所有其他人都会再次隐藏在屏幕外

它们被设置为新位置的动画

我还对大多数索引测试进行了转换，使它们以零为基础，这就是大多数现代语言喜欢解释集合索引的方式

仅供参考，我预计totalSlides会增加到2，但会增加到3， 因此，将其设置为-1会让人感觉不舒服-可能需要一种不同的循环结构 叫什么的

---

另外，请注意，我只在Firefox上测试过这一点，所以您的里程可能会有所不同。

为什么不使用现有的jQuery插件来实现这一点？外面有很多。首先：，…非常感谢你们两位回复我的帖子。几乎到了——ajaxalex——你的解决方案非常有效。然而，我的页面上有多张“幻灯片”。幻灯片放映区域是窗口宽度的100%，因此我需要在任何时候至少看到3或4张幻灯片，有什么想法吗？这个解决方案并没有针对多张幻灯片进行优化，但蛮力方法是复制