簡單內容滑塊無法正常工作

我正在使用一個簡單的內容滑塊來顯示三張幻燈片中的顧客評論。這是我到目前爲止的代碼JSFiddle，但不知何故，它顯示了我像3 +幻燈片（而不是顯示三個div，它表現出更多「空」的方式）所以在第三張幻燈片後，它應該再次從第一張幻燈片開始。簡單內容滑塊無法正常工作

我的另一個問題是，它似乎在JSfiddle上工作，但是當我複製並粘貼到我的HTML它不會工作。

，我在我的HTML已經添加了兩條線

<script src="Webdesign/NagelsalonHintham/js/functions.js"></script> 
<script src="http://ajax.googleapis.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

請有人可以幫助我。

來源

2014-01-27 user3231901

要回答你的第一個問題，你得到更多幻燈片比你想要的原因是因爲你需要在你的JS更具體。

你的next和prev按鈕事件處理程序使用jQuery動畫來移動'slidie'div - 這很好。但是，如果沒有更多的幻燈片顯示在特定的方向上，則需要添加一些額外的邏輯以阻止div進一步遠離動畫。我已經改變了你的JS實現的東西，我相信你想：

var sliderWidth = 300; 
var slider = $('#slidie'); 
var sliderCount = $('div', slider).length; 
slider.width(sliderCount * sliderWidth); 

var currentSlide = 1; 

$('a.prev').click(function() { 
    if (currentSlide > 1) { 
     $('#slidie').animate({ 
      left: '+=' + sliderWidth 
     }, 500); 
     currentSlide -= 1; 
    } 
}); 

$('a.next').click(function() { 
    if (currentSlide < sliderCount) { 
     $('#slidie').animate({ 
      left: '-=' + sliderWidth 
     }, 500); 
     currentSlide += 1; 
    } 
});

所有我加入了一個名爲currentSlide一個額外的變量被初始化爲1，這是必要爲您跟蹤哪個幻燈片目前正在向用戶顯示。

然後，在兩個事件處理程序中，檢查currentSlide是否允許動畫發生。如果當前幻燈片爲> 1，即您不在第一張幻燈片上，則只需要預覽按鈕即可工作。同樣，如果當前幻燈片是< sliderCount，即只有最後一張幻燈片，您只需要下一個按鈕即可工作。

在執行動畫以保持與用戶當前正在看到的內容同步後，您還必須確保更改currentSlide。這是通過currentSlide -= 1和currentSlide += 1代碼行完成的。

要回答你的第二個問題，我想你遇到的問題是jQuery在你的代碼執行之前還沒有完成加載。我將首先重新排序腳本標記的HTML，以便jQuery是第一次加載：

<script src="http://ajax.googleapis.com/ajax/jQuery/jquery-1.10.2.min.js"></script> 
<script src="Webdesign/NagelsalonHintham/js/functions.js"></script>

此外，出於安全原因，我想包你的代碼在一個jQuery DOM ready事件。這基本上意味着，只有當DOM（允許JS訪問HTML頁面的框架）完成由瀏覽器構建時，纔會執行您編寫的代碼。因此，如果您引用任何標籤（您會這樣做），那麼您知道標籤在JS運行之前實際存在。這是如下圖所示：

$(document).ready(function() { 

    // Your code from above goes here 

});

它工作在的jsfiddle的原因是因爲他們做了jQuery包括你，包括把你的代碼在正確的位置（默認）。您可以在JSFiddle窗口的左側進行更改。

僅供參考，工作的jsfiddle此解決方案是在這裏：http://jsfiddle.net/EULJd/

來源

2014-01-27 02:00:35

感謝您的答覆。我已經在顯示的文檔就緒標記之間添加了javascript代碼，但是在預覽html中的主頁時它仍然不起作用。我不知道我做錯了什麼。 – user3231901

我找到了！解決方案的確是把代碼放在文檔就緒標籤之間，我忘了把http：//放在jquery鏈接的前面。 – user3231901

很高興聽到它的作品，是的 - 不包括'http：//'會給瀏覽器的jQuery腳本的不正確的URL。您還可以使用「//ajax.googleapis.com/ajax/jQuery/jquery-1.10.2.min.js」引用外部腳本，即省略「http：」。這是速記告訴瀏覽器「使用當前協議訪問這個URL」，所以如果你的網站使用純HTTP，它使用'http：//'，但是如果你的網站使用HTTPS，它使用'https：//'這在後一種情況下很有用 - 它更安全。如果您在使用HTTPS爲您的網頁提供服務時包含非HTTPS資源，那麼實際上瀏覽器會發出抱怨。 –

簡單內容滑塊無法正常工作

回答

相關問題