Question

尝试在JS中简化一些事情。假设我有两个图像，我希望页面随机加载每个图像。我希望交换两个图像，当它被点击时，它应该改变为另一个图像。我怎样才能做到这一点？感谢

Answer 1

你需要在剧本的某个地方使用这一行

var IMG1 = document.getElementById("IMG1");

Answer 2

这里是普通的javascript代码（没有使用框架），它将imgs数组中的一个图像随机加载为初始图像，然后在每次按下按钮时循环浏览不同的图像，并在jsfiddle中查看它是否正常工作：{ {3}}：

var imgs = [
    "http://photos.smugmug.com/photos/344291068_HdnTo-Th.jpg",
    "http://photos.smugmug.com/photos/344290962_h6JjS-Th.jpg",
    "http://photos.smugmug.com/photos/344290515_bWVzK-Th.jpg"
];

// select a random image from the img URL array
function getRandomImage() {
    var index = Math.floor(Math.random() * imgs.length);
    return(imgs[index]);
}

// create image tag with random image
function initImage() {
    var img = new Image();
    img.id = "dynImage";
    img.src = getRandomImage();
    var o = document.getElementById("imageHolder");
    o.appendChild(img);
}

// given the current URL, get the next URL in the array, 
// wrapping back to beginning if needed
function nextImage(current) {
    for (var i = 0; i < imgs.length; i++) {
        if (imgs[i] == current) {
            i++;
            if (i >= imgs.length) {
                i = 0;
            }
            return(i);
        }
    }
    return(0);
}

// put a different image into the image tag
function swapImage() {
    var o = document.getElementById("dynImage");
    var next = nextImage(o.src);
    o.src = imgs[next];
}

// initialize the button event handler
function initButton() {
    var o = document.getElementById("swap");
    if (o.addEventListener) {
        o.addEventListener("click", swapImage);
    } else {
        o.attachEvent("onclick", swapImage);
    }
}

initImage();
initButton();

您可以根据需要将尽可能多的URL放入imgs数组中。你可以在这里看到这个：http://jsfiddle.net/jfriend00/R7nUa/我已经添加了预加载，所以当你按下按钮时交换是即时的。

JS中的简单函数

2 个答案: