JavaScript 点击带有按钮导航的图片

Question

Web 开发新手，尝试创建通过单击 "previous" 和 "next" 按钮循环浏览的图片库。有人知道怎么做这个吗？我不认为我做对了什么，但我会包括我到目前为止所做的。这个想法是让它适应 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

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

另一个问题是，当您设置 currentImage 的 src 属性时，您也将该属性设置为纯数字值。那不是有效的图像 url。

您可以将照片 URL 放在一个数组中，并在按下下一个和上一个按钮时循环浏览这些图像。

尝试这样的事情（警告未经测试的代码）：

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 2

正如其他人所说，您不能使用 int 作为变量名。

每个按钮上还有 "onclick" 个事件和通过 jQuery 设置的事件，您只需要其中之一即可。

将每个 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 正确更新。

Answer 3

无需在按钮标签内使用 "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 点击带有按钮导航的图片

JavaScript Click images with button navigation

javascript

onclick

image-gallery

portfolio