javascript - 如何让 JavaScript 在一系列图像中旋转

Question

我遇到了一个问题，我无法让我的代码在我的图库中循环旋转多个图像(只是我在谷歌上获得的一堆图像)。但是，我可以获得 1 张图像来循环显示图像，但是 iv 试图让它与多个图像一起工作的一切都失败了。任何帮助/提示都会很有用。我在大学学习 web 开发，我了解 javascript 的基础知识，但在创建应用程序时似乎遇到了一些麻烦。

这是我的代码的链接:jsFiddle

$(document).ready(function () {
    var img = document.images;
    // Holds the image collection
    var counter = 0;

    var imgArray = [];
    imgArray[0] = "http://www.zeroprox.tk/temp/images/img1.png";
    imgArray[1] = "http://www.zeroprox.tk/temp/images/img2.jpg";
    imgArray[2] = "http://www.zeroprox.tk/temp/images/img3.png";
    imgArray[3] = "http://www.zeroprox.tk/temp/images/img4.jpg";
    imgArray[4] = "http://www.zeroprox.tk/temp/images/img5.jpg";
    imgArray[5] = "http://www.zeroprox.tk/temp/images/img6.png";
    imgArray[6] = "http://www.zeroprox.tk/temp/images/img7.jpg";
    imgArray[7] = "http://www.zeroprox.tk/temp/images/img8.png";

    $("#left-arrow").click(function () {
        if (counter < 0) {
             counter = imgArray[counter] - 1;   
        } else {
             counter--;   
        }

        img[1].src = imgArray[counter];
    });
    // Left arrow... Previous

    $("#right-arrow").click(function () {
        counter = (counter + 1) % imgArray.length;

        img[1].src = imgArray[counter];
    });
    // right arrow... Next
});

Answer 1

JSFiddle

检查这个，它应该可以解决您的问题；)

你每次都替换同一张图片，现在创建一个新图片并删除另一个。

还添加了 div#imagelist 以用作图像容器并更容易从 JavaScript 访问

var newImg = $(document.createElement("img"));
newImg.attr("src",imgArray[counter]);
$("#imagelist img").last().remove();
$("#imagelist").prepend(newImg);