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之外，我还没有测试过这个，所以你的里程可能会有所不同。

Answer 2

我必须从头开始创建类似于ExtJS的东西，我问this question其中包含我最终使用的JavaScript源代码，但最终它基于jquery.slideShow Marcel Eichner }。事实证明，“滚动我自己”很容易，但是有很多jQuery选项供你试用。

希望这有帮助！

幻灯片 - 连续循环

2 个答案: