网络开发新手,尝试创建一个通过单击“上一个”和“下一个”按钮循环浏览的图像库。有人知道怎么做这个吗?我认为我没有做任何正确的事情,但我将包括到目前为止我所做的事情。这个想法是使其适用于 n 不定数量的图像。
代码:
<img src= "photos/1.jpg" id="currentImage" height="288"/>
<button id= "prev" onclick="prevImage()" class="portfolioNavigation">Previous</button>
<button id= "next" onclick="nextImage()" class="portfolioNavigation">Next</button>
<script type= "text/javascript">
var counter = 2;
var 1 = "photos/1.jpg";
var 2 = "photos/2.jpg";
var 3 = "photos/3.jpg";
prev.onclick = function(){
document.getElementById("currentImage").src = counter - 1;
counter--;
}
next.onclick = function(){
document.getElementById("currentImage").src = counter + 1;
counter++;
}
if(counter == 3){
counter = 0;
};
</script>
最佳答案
无需在按钮标签内使用“onclick”。
<script type= "text/javascript">
var counter = 2;
var sourceUrl = "photos/" + counter + ".jpg";
var prev = document.getElementById("prev");
var next = document.getElementById("next");
prev.onclick = function(){
counter--;
document.getElementById("currentImage").src = sourceUrl;
}
next.onclick = function(){
counter++;
document.getElementById("currentImage").src = sourceUrl; }
if(counter == 3){
counter = 0;
};
</script>
关于带有按钮导航的 JavaScript 单击图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29779829/