Question

我需要一些javascript代码。我有一个HTML代码，可以从我的图像文件夹中读取我的图像列表。我必须创建一个功能按钮，所以当我点击下一个按钮时，将显示下一个图像。我有我的代码，但不知怎的，它不起作用。我调试了代码，没有错误，但下一个图像没有显示

以下是我的代码：

var $ = function(id) {
    return document.getElementById(id);
};

var listNode, captionNode, imageNode;

// Process image links
var i, linkNode, image;
var imageCache = [];

var imageCounter = 0;

var nexButton = function () {
    
    listNode = $("image_list");
    captionNode = $("caption");
    imageNode = $("image");
    
    var links = listNode.getElementsByTagName("a");
    
    var imageCounter = 0;
    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");
        
        if (imageCounter < linkNode) {
            imageCounter = imageCounter + 1;
            image = imageCache[imageCounter];
            imageNode.src = image.src;
            captionNode.firstChild.nodeValue = image.title;
        }
        else {
            alert("This is the last image");
        }
    }
    
    
};
window.onload = function() {
    $("next").onclick = nexButton;
};

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <title>Slide Show</title>
    <link rel="stylesheet" href="main.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="slide_show.js"></script>
</head>

<body>
<section>
    <h1>Fishing Slide Show</h1>
    <ul id="image_list">
        <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li>
        <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li>
        <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li>
        <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li>
        <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li>
    </ul>
    <h2 id="caption">Casting on the Upper Kings</h2>
    <p>
    	<img src="images/casting1.jpg" alt="" id="image">
    </p>
    <input type="button" value="Previous" name="previous" id="previous">
    <input type="button" value="Next" name="next" id="next">
</section>
</body>
</html>

JavaScript：下一个按钮

0 个答案: