麻煩與圖像庫jquery

Question

我正在做一個簡單的圖像庫，目前只有2個圖像。我希望文字隨圖片而改變。目前按鈕不起作用，我不知道爲什麼。

$(document).ready(function(){ 
var currPic = 0; 
var pictures = ["sk8.jpg", "3dprntr.jpg"]; 
var text = ['x','y'] 
$("#next").click(function(){ 
    currPic++; 
    $("#myImage").attr("src", pictures[currPic]); 
    $("#desc").html(text[currPic]); 
}); 
$("#prev").click(function(){ 
    currPic--; 
    $("#myImage").attr("src", pictures[currPic]); 
    $("#desc").html(text[currPic]); 
})}); 

及有關HTML

<div id="gallery"> 
     <img src="sk8.jpg" border="0"/> 
    </div> 
    <div id="buttons"> 
     <input type="button" value="Previous" id="prev" /> 
     <input type="button" value="Next" id="next" /> 
    </div> 
    <p id = "desc">text</p> 

Answer 1

使用text同樣的邏輯，你正在使用image

而且解決幾個問題：

• id缺失在image
• var currPic應該是var currpic，您正在使用您的進一步代碼：

試試這個：

Try out this code: 

$(document).ready(function(){ 
 
    var currpic = 0; 
 
    var pictures = ["https://gaytravel-destinations.s3.amazonaws.com/32491/united-states-beaches-and-scenery__small.jpg", "http://www.carolinasusi.com.au/cmsvltl/img/8/5/a/596dbfe80598106527a80d1ddddf6/Le-Marche%2C-Blue-skies-and-Le-Marche-scenery.jpg"]; 
 
    var texts = ["new text", "other new text"]; 
 
    $("#next").click(function(){ 
 
     currpic++; 
 
     $("#myImage").attr("src", pictures[currpic]); 
 
     $("#desc").text(texts[currpic]); 
 
    }); 
 
    $("#prev").click(function(){ 
 
     currpic--; 
 
     $("#myImage").attr("src", pictures[currpic]); 
 
     $("#desc").text(texts[currpic]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gallery"> 
 
    <img id="myImage" src="https://gaytravel-destinations.s3.amazonaws.com/32491/united-states-beaches-and-scenery__small.jpg" border="0"/> 
 
</div> 
 
<div id="buttons"> 
 
    <input type="button" value="Previous" id="prev" /> 
 
    <input type="button" value="Next" id="next" /> 
 
</div> 
 
<p id = "desc">text</p>