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

How to get JavaScript to rotate through a series if images

本文关键字：if 图像 旋转 一系列 JavaScript      更新时间：2024-04-02

我遇到了一个问题，我无法让我的代码在一个循环中为我的图像库旋转多个图像（只是我在谷歌上得到的一堆图像）。然而，我可以获得一个图像来循环浏览图像，但我试图让它与多个图像一起工作的一切都失败了。任何帮助/提示都是有用的。我在大学学习网络开发，我了解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
});

JSFiddle

检查一下，它应该能解决你的问题；）

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

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

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