簡單的Javascript幻燈片功能不工作

Question

我是新來的Javascript，我試圖做一個簡單的'幻燈片'與圖像。這裏是我的代碼，把它不起作用，它正常加載的HTML代碼，忽略'隱藏'功能：該怎麼辦？

<script type="text/javascript"> 
     $(function() { 
      var tot = $(".slide").length, 
      current = 1 

      $(".slide").not(":first").hide() 

      $("#next").click(function() { 
      if (current+1 > tot) return false 

      $(".slide:visible").hide().next().show() 
      current++ 
      }) 

      $("#prev").click(function() { 
      if (current-1 < 1) return false 

      $(".slide:visible").hide().prev().show() 
       current-- 
      }) 
     })​ 
    </script> 

    <div id="slide_container"> 
      <div class="slide"> 
       <p>Step 1 explained</p> 
       <img src="images/android.png" border="none"/> 
      </div> 
      <div class="slide"> 
       <p>Step 2 Explained</p> 
       <img src="images/apple.png" border="none"/> 
      </div> 
      <div class="slide"> 
       <p>Step 3 explained</p> 
       <img src="images/windows.png" border="none"/> 
      </div> 
      <div> 
       <button id="prev">Prev</button> 
       <button id="next">Next</button> 
      </div> 
    </div> 

謝謝！

Answer 1

爲了清晰起見，我已經重新格式化了您的代碼並添加了一些分號;，並且我也更改了當前和總計的索引，並且似乎都可以正常工作我已使用以下JavaScript創建了jsFiddle ，而且一切似乎都很好。試一試

$(function() 
{ 
    var total = $(".slide").length; 
    var current = 0 

    $(".slide").not(":first").hide() 

    $("#next").click(function() 
    { 
     if (current + 1 >= total) 
     { 
      return false; 
     } 

     $(".slide:visible").hide().next().show(); 
     current++ 
    }) 

    $("#prev").click(function() 
    { 
     if (current <= 0) 
     { 
      return false; 
     } 

     $(".slide:visible").hide().prev().show(); 
     current--; 
    }); 
})​ 

Answer 2

我希望你在你提供的腳本塊之前添加了Jquery引用。只是一個想法。