Question

我很难找到问题的答案。我有一个简单的幻灯片放映，我有下一个，以及之前的按钮，但是当我点击上一个按钮时，它停在第一个图像。我希望它从第一张图像到最后一张，但找不到合适的结果。这就是我所拥有的：

window.onload = function () {
    var listNode = $("image_list");
    var captionNode = $("caption");
    var imageNode = $("image");

    var links = listNode.getElementsByTagName("a");

    // Process image links
    var i, linkNode, image;
    var imageCache = [];
    for (i = 0; i < links.length; i++) {
        linkNode = links[i];

        // Preload image and copy title properties
        image = new Image();
        image.src = linkNode.getAttribute("href");
        image.title = linkNode.getAttribute("title");
        imageCache.push(image);
    }

    //next button handler
    var nextButton = $("next");
    var imageCounter = 0;
    nextButton.onclick = function () {
        imageCounter = (imageCounter + 1) % imageCache.length;
        image = imageCache[imageCounter];
        imageNode.src = image.src;
        captionNode.firstChild.nodeValue = image.title;
    }

    //previous button handler
    var prevButton = $("previous");
    var imageCounter = 0;
    prevButton.onclick = function () {
        imageCounter = (imageCounter - 1) % imageCache.length;
        image = imageCache[imageCounter];
        imageNode.src = image.src;
        captionNode.firstChild.nodeValue = image.title;
    }

Answer 1

这就是我要做的事情（我不完全确定语法）：

//previous button handler
var prevButton = $("previous");
var imageCounter = 0;
prevButton.onclick = function () {
    imageCounter = (imageCounter - 1) % imageCache.length;

    //------- INSERTED CODE --------//
    imageCounter = imageCounter >= 0 ? imageCounter : imageCache.length - 1 ; //Meaning you've reached the first image and want to go to the last
    //------- INSERTED CODE --------//

    image = imageCache[imageCounter];
    imageNode.src = image.src;
    captionNode.firstChild.nodeValue = image.title;
}

<强>解释

设置imageCounter后，检查其值。如果它等于或高于零，则保持该值。如果不是（意味着您要转到最后一个图像），请将其值设置为imageCache减去1的长度，看数组索引从0开始计数。）

制作幻灯片img从头到尾

1 个答案: