在jQuery中創建幻燈片（不是圖像）

我有一個div元素包含在一個容器中div，我想滑過它們，一次只顯示一個，並在某個超時後滑動當前可見使用動畫向左移動div，並從右側滑入下一個div。在jQuery中創建幻燈片（不是圖像）

我的HTML看起來是這樣的：

<div id="topMaps" style="height: 225px; overflow: hidden;"> 
    <div>First slide - some content here</div> 
    <div>Second slide - some content here</div> 
    <div>... slide - some content here</div> 
    <div>n'th slide - some content here</div> 
</div>

我用下面的腳本此：

var currentSlide = 1; 
var numSlides = -1; 
var slideSpeed = 1000; 
var timePerSlide = 3500; 

function nextSlide() { 
    $('#topMaps div:nth-child(' + currentSlide + ')').hide("slide", { direction: "left" }, slideSpeed); 
    currentSlide += 1; 
    if (currentSlide >= numSlides) 
     currentSlide = 1; 
    $('#topMaps div:nth-child(' + currentSlide + ')').show("slide", { direction: "left" }, slideSpeed); 

    setTimeout(nextSlide, timePerSlide); 
} 

$(document).ready(function() { 
    numSlides = $('#topMaps div').length; 
    setTimeout(nextSlide, timePerSlide); 
});

但它不工作。當nextSlide函數被調用的第一次，火狐報告以下錯誤：

o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function 
http://localhost/templates/front/default/js/jquery.js 
Line 19

當我在Firebug的監視面板中添加$('#topMaps div:nth-child(' + currentSlide + ')')，它返回10個元素的集合？不知道發生了什麼事。

也許有人可以幫我嗎？

編輯我想出了選擇器的問題，我需要使用$('#topMaps>div:nth-child(' + currentSlide + ')')（請注意>）。它仍然沒有工作。

來源

2009-09-10 Aistina

雖然不是你想要的答案，你有沒有考慮使用Cycle Plugin？

來源

2009-09-10 09:02:41 Yacoby

我在其他地方使用循環插件，但是這個特定的幻燈片不包含''''元素，所以這是行不通的。 – Aistina 2009-09-10 09:06:54

爲什麼不呢？週期網站有不使用圖像的示例（中級演示（第2部分）） – Yacoby 2009-09-10 09:25:18

嗯，我會很生氣！謝謝:) – Aistina 2009-09-10 09:45:56

我可能會建議爲每個div設置一個ID並在nextSlide（）js函數中調用它，測試currentSlide變量並選擇下一個div 這不是一個好的編程方法，但至少可以讓它工作到你找出$（'＃topMaps div：nnth-child（'+ currentSlide +'）'）

來源

2009-09-10 09:06:57 Khodor

我解決了選擇器的問題（查看我的編輯），但仍然得到相同的錯誤。 – Aistina 2009-09-10 09:10:16

你能調試並檢查錯誤在哪裏嗎？隱藏，顯示，長度或setTimeout？ – Khodor 2009-09-10 09:15:37

調用隱藏時發生錯誤。 – Aistina 2009-09-10 09:17:46

在jQuery中創建幻燈片（不是圖像）

回答

相關問題