麻烦与图像库jquery
问题描述:
我正在做一个简单的图像库,目前只有2个图像。我希望文字随图片而改变。目前按钮不起作用,我不知道为什么。麻烦与图像库jquery
$(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>
答
使用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>
虽然这确实使逻辑更简单,按钮仍然不起作用。 –
@KaitJardine哦,我在你的js代码中有几个问题,更新了答案,现在使用答案 你也可以运行代码片段来检查演示, –
没有错误,但我得到的文本改变,但图片仍然不“T。我将用新代码更新原始文章 –