Question

Web开发的新手，并尝试创建一个图像库，通过单击“上一个”和“下一个”按钮循环显示。有人知道怎么做这个吗？我认为我没有做任何正确的事情，但我会包括到目前为止我所做的事情。这个想法是使这适应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>

Answer 1

无需在按钮标签内使用“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>

Answer 2

您的代码现在有几个问题。其中之一是您的变量名称是普通数字。您不能在JavaScript中使用以数字开头的变量名称。虽然不是一个很好的示例，但_1有效，image1是有效的，甚至是更具描述性的变量数。

另一个问题是，当您设置src currentImage属性时，您还要将该属性设置为普通数字的值。这不是有效的图片网址。

您可以将照片网址放入数组中，并在按下下一个和上一个按钮时循环显示这些图像。

尝试这样的操作（警告未经测试的代码）：

var images = ["photos/1.jpg", "photos/2.jpg", "photos/3.jpg"];
var numImages = images.length;

prev.onclick = function(){
    document.getElementById("currentImage").src = images[(counter - 1) % numImages];
    counter--;
}

此处%运算符的重要性在于它包含了[0，numImages）的值。

Answer 3

正如其他人发布的那样，你不能使用int作为变量名。

您还可以通过jQuery在每个按钮和事件上设置“onclick”事件，只需要一个或另一个。

将每个src字符串存储在一个数组中并使用“counter”访问它将对您有用。它还允许您使用可变数量的图像。

<强> HTML

 <img src= "photos/1.jpg" id="currentImage"  height="288"/>
 <button id= "prev" class="portfolioNavigation">Previous</button>
 <button id= "next" class="portfolioNavigation">Next</button>

<强>的JavaScript

var counter = 0;
   var srcArray = ["photos/1.jpg", "photos/2.jpg", "photos/3.jpg"];

prev.onclick = function(){
        document.getElementById("currentImage").src = srcArray[--counter];
    }
next.onclick = function(){
        document.getElementById("currentImage").src = srcArray[++counter];
    }

if(counter == 3){
        counter = 0;
    };

如果你检查这个JSFiddle中的图像元素，你会看到src正确更新。

JavaScript使用按钮导航单击图像

3 个答案: