請幫我解決jquery幻燈片

Question

我用jQuery easyslider創建了幻燈片。但沒有發生。我無法找到問題的具體位置。

的JavaScript如下：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#slider").easySlider({ 
      auto: true, 
      continuous: true 
     }); 
    }); 
</script> 

..和相應的HTML：

<div id="slider"> 
    <ul>     
     <li><img src="Beauty/1.jpg" /></li> 
     <li><img src="Beauty/2.jpg" /></li> 
     <li><img src="Beauty/3.jpg" /></li> 
     <li><img src="Beauty/4.jpg" /></li> 
     <li><img src="Beauty/5.png" /></li>   
    </ul> 
</div> 

Answer 1

你張貼在這裏的代碼工作。我已經安裝了一個小提琴：http://jsfiddle.net/jomanlk/jFePh/

在HTML頁面中查看您的代碼有幾個問題。

1. 的圖像實際上並不存在，所以你不會知道是否它反正正常

2. 你的顯示/隱藏代碼似乎並不奏效（toggleMe('para2')我認爲）。它並不實際顯示所有的容器。

3. #slider保持隱藏狀態，UL內部只是在pt/px之間切換。

你的標記似乎沒問題，但是你的JS沒有像你期望的那樣工作。我假設Dreamweaver在頁面頂部包含了很多JS。在將任何功能添加到頁面之前，您可能需要清除所有這些並獲得基本工作。

編輯

你是有關easySlider如何計算出的尺寸有問題。

你開始與

<div id="para3" style="display:none"> 

當easySlider代碼踢，它試圖找出尺寸。由於高度和寬度都設置爲0它的數字它不能實際做的幻燈片，並放棄（這是過於簡單化）

這可以在該小提琴我設置可以看出：http://jsfiddle.net/jomanlk/jFePh/2/

解決方法是從您的DIV中刪除display:none，並使用JS 將其隱藏後，easySlider已加載並完成其位。

所以要解決這個問題。

1. 取出style屬性，並添加一個類，所以它看起來像這樣<div id="para1" class="hideMeLater">

2. 更改JS在你的文件的頂部，它看起來像下面的

 
    $(document).ready(function(){ 
     $("#slider").easySlider({ 
      auto: true, 
      continuous: true 
     }); 
     $('.hideMeLater').hide();//hiding all the divs we removed display:none from 
    }); 

這應該做解決您的幻燈片問題。我在這裏設置了一個小樣：http://jsfiddle.net/jomanlk/jFePh/3/

另外，我建議你熟悉JS和jquery，這樣你就可以理解包含插件時實際發生的情況。網上有一些優秀的教程。

此外，你應該清理你的HTML。

Answer 2

你有id="slider"多個元素儘量給唯一的ID .. 我認爲THN它會工作...