jQuery滑塊故障

您好我正在創建一個簡單的jQuery幻燈片放映。幻燈片的要求很簡單，只是幻燈片向左側不斷翻轉。線上顯示的大部分教程都非常先進和華麗。但後來我發現了一個幾乎與我想要的一樣的東西。jQuery滑塊故障

http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php

但問題是，當圖像幻燈片到最後它會向後滑動，以我的第一張圖像。有什麼方法可以更改代碼，以便當圖像滑到最後時，幻燈片將保持返回到第一個圖像，但不會向後滑動。

來源

2012-10-30 Weng Kee Chang

嘗試這：http://jonraasch.com/blog/a-simple-jquery-slideshow –

嗨，我有瀏覽器通過該網站。效果不是我想要存檔的。我想要的效果還剩 –

@WengKeeChang - 請看我的答案。 –

請改變你的JavaScript這樣的：

UPDATE：你想滑塊回到原來的位置滑動一旦到達幻燈片。一旦到達最後一張幻燈片，功能slideLeft即可實現。

$(document).ready(function() { 
    var currentPosition = 0; 
    var slideWidth = 500; 
    var slides = $('.slide'); 
    var numberOfSlides = slides.length; 
    var slideShowInterval; 
    var speed = 3000; 
    var lastSlideReached = false; 

    slides.wrapAll('<div id="slidesHolder"></div>'); 
    slides.css({ 'float' : 'left' }); 
    $('#slidesHolder').css('width', slideWidth * numberOfSlides); 
    slideShowInterval = setInterval(changePosition, speed); 

    function changePosition() { 
     if(! lastSlideReached) { 
      if(currentPosition == (numberOfSlides-1)) { 
       lastSlideReached = true; 

          clearInterval(slideShowInterval); 
       slideLeft(); 
      slideShowInterval = setInterval(changePosition, speed); 
      } else { 
       currentPosition++; 
      } 
     } else { 
      if(currentPosition == 0) { 
       lastSlideReached = false; 
      } else { 
       currentPosition--; 
      } 
     } 

     moveSlide(); 
    } 

    function moveSlide() { 
     $('#slidesHolder').animate(
      {'marginLeft' : slideWidth*(-currentPosition)} 
     ); 
    } 

function slideLeft() { 
    $('#slidesHolder').animate({'marginLeft' : 0}); 
    currentPosition = 0; 
    lastSlideReached = false; 
} 
});

我添加了一個變量var lastSlideReached = false;並做了一些修改功能changePosition。

希望它有幫助。

來源

2012-10-30 10:24:45

嗨Pushpeh，謝謝你的答案。但效果不是我想要的。是否有可能當幻燈片到達結尾。它會回到第一張幻燈片，但不是向後滑動，而是繼續向左滑動 –

嗨翁，你是否希望滑塊一直到達最後一點並重新開始滑動到最左端。如果我錯了，請糾正我。 –

你好，我修改了答案。嘗試一下，讓我知道。 –

如果你需要避免最終滑回第一和剛剛重新啓動，我建議在Pushpesh的回答略有變化：

$(document).ready(function() { 
var currentPosition = 0; 
var slideWidth = 500; 
var slides = $('.slide'); 
var numberOfSlides = slides.length; 
var slideShowInterval; 
var speed = 900; 
var lastSlideReached = false; 

slides.wrapAll('<div id="slidesHolder"></div>'); 
slides.css({ 'float' : 'left' }); 
$('#slidesHolder').css('width', slideWidth * numberOfSlides); 
slideShowInterval = setInterval(changePosition, speed); 

function changePosition() { 
    if(! lastSlideReached) { 
     if(currentPosition == (numberOfSlides-1)) { 
      lastSlideReached = true; 
     } else { 
      currentPosition++; 
     } 

     moveSlide(); 

    } else {      
     resetSlide() 
    } 


} 

function moveSlide() { 
    $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)}); 
} 

function resetSlide(){ 
    currentPosition = 0; 
    $('#slidesHolder').css('marginLeft', currentPosition); 
    lastSlideReached = false; 

}

}）;

歡呼

來源

2012-10-30 11:35:30 saski

嗨saski，謝謝你的答案。但效果不是我想要的。是否有可能當幻燈片到達結尾。它會回到第一張幻燈片，但不是向後滑動，而是繼續向左滑動 –

對不起，我錯過了。然後，需要： a）克隆#slidesHolder，並將其放在原始文件後面，到達末尾 b）...或移動到輪播組件，該組件會逐個處理列表元素的位置。在這種情況下，我會建議[iScroll]（http://cubiq.org/iscroll-4）或[滑動]（http://swipejs.com/）。 – saski

嗨Saski。可能是我沒有解釋清楚。參考http://www.airfares.com.sg/。當它到達最後時，他們的旗幟將繼續向左滑動回到第一張幻燈片。我想爲幻燈片創建類似的效果。我只是一個JavaScript的初學者，所以我不知道如何去做你在前一篇文章中提出的步驟。 –

jQuery滑塊故障

回答

相關問題