Question

好的，这是我正在尝试做的事情，它之前太模糊了，所以这里有一个更好的解释，请记住我现在只编程了两周的页面，所以任何帮助都会受到赞赏。

我需要创建一个HTML / JavaScript网页，其中显示三个图像以及每个图像的标题（描述）。对于每个图像，我还需要创建一个按钮，将第一个图像更改为同一主题上的不同图像（并更改标题）。还需要一个按钮，将所有三个图像恢复为原始图像。

我让编码工作，以便在按钮点击时一个图像会改变为另一个图像，但是当我添加第二个和第三个编码时，任何东西都不再有效。

<html> 
<head> 
<script> 

function changeImage()
{
var img = document.getElementById("image");
img.src="http://cdn.memegenerator.net/images/300x/159304.jpg";
return false;
}

</script>

</head>
<body>
<img id="image" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>

<script> 

function changeImage()
{
var img = document.getElementById("image1");
img.src="http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg";
return false;
}

</script>

<body>
<img id="image1" src="http://static.guim.co.uk/sys-    images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" />
<button id="Click1" onclick="changeImage();">Click to change!</button>
</body>

<br>

<script> 

function changeImage()
{
var img = document.getElementById("image2");
img.src="http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg";
return false;
}

</script>

<body>
<img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master- chief-1.jpg" />
<button id="Click2" onclick="changeImage();">Click to change!</button>
</body>

<br>

</html>

Answer 1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script>
        var dd = 5;
        var cnt = 0;
        function chng() {

            var rotator = document.getElementById('rr');  // change to match image ID
            var imageDir = 'Images/';                          // change to match images folder


            var images = ['2.jpg', '3.jpg', '4.jpg', '5.jpg'];

            cnt++;

            var len = images.length;
            if (cnt < dd) {
                rr.src = imageDir + images[cnt];
            }
            else if (cnt == len) {
                rr.src = imageDir + images[0];
                cnt = 0;
            }
        }

</script>

</head>
<body>
<img src="Images/1.jpg" id="rr" height="500" width="650">

    <input type="button" value=" next. . " onclick="chng()" />
</body>
</html>

Answer 2

您的页面中存在以下几个问题：缺少文档类型声明，缺少title标记，head中的实际内容HTML以及多个body标记。除此之外，changeImage()会在每个script中替换为新src。最后，只有最后一个函数会更改#image2的{{1}}。

如果我理解你的问题，你需要这样的事情：

script中的head：

function changeImage (element) {
    var n,
        imageData = [
            [
                {
                    src: "http://thechive.files.wordpress.com/2011/10/william-defoe.jpg",
                    caption: "Caption for image 1.1"
                },
                {
                    src: "http://cdn.memegenerator.net/images/300x/159304.jpg",
                    caption: "Caption for image 1.2"
                }
            ],
            [
                {
                    src: "http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg",
                    caption: "Caption for image 2.1"
                },
                {
                    src: "http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg",
                    caption: "Caption for image 2.2"
                }
            ],
            [
                {
                    src: "http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg",
                    caption: "Caption for image 3.1"
                },
                {
                    src: "http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg",
                    caption: "Caption for image 3.2"
                }
            ]
        ];
    if (element > -1) {
        document.getElementById('image' + element).src = imageData[element][1].src;
        document.getElementById('caption' + element).innerHTML = imageData[element][1].caption;
    } else {
        for (n = 0; n < imageData.length; n++) {
            document.getElementById('image' + n).src = imageData[n][0].src;
            document.getElementById('caption' + n).innerHTML = imageData[n][0].caption;
        }
    }
    return;
}

body：

<body>
    <button onclick="changeImage(-1);" >Click to restore all!</button>
    <div>
        <h1 id="caption0">Caption for image 1.1</h1>
        <button onclick="changeImage(0);">Click to change!</button>
        <img id="image0" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" />
    <div>
        <h1 id="caption1">Caption for image 2.1</h1>
        <button onclick="changeImage(1);">Click to change!</button>
        <img id="image1" src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" />
    </div>
    <div>
        <h1 id="caption2">Caption for image 3.1</h1>
        <button onclick="changeImage(2);">Click to change!</button>
        <img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg" />
    </div>
</body>

如您所见，路径和标题的数据位于嵌套数组中的对象中。通过这种方式，它们与实际内容分离，代码更易于维护。

您没有提供图片标题的布局示例，因此我将标题信息放在图片上方的H1标记中。随意更改元素及其位置。请注意，您还可以在标题文本中使用HTML标记。

但是，执行此代码时存在一些限制并浪费CPU时间：每次单击都会创建imageData，每个元素只能使用两个不同的路径。

我建议你有更多面向对象的方法来完成任务。请查看此JSfiddle，它展示了非常相似的功能，并且更灵活，也更容易维护。

通过按钮点击更改Javascript多个图像

2 个答案: