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

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

javascript image button

Javascript通过单击按钮更改多个图像,javascript,image,button,Javascript,Image,Button,好的，这就是我想做的，之前的解释太模糊了，所以这里有一个更好的解释，请记住，我只编写了大约2周的页面，所以非常感谢您的帮助我需要创建一个HTML/JavaScript网页，显示三个图像以及每个图像的标题（描述）。对于每个图像，我还需要创建一个按钮，将第一个图像更改为同一主题上的不同图像（并更改标题）。还需要有一个按钮，将所有三个图像恢复回原始图像我得到的编码工作，使一个图像将改变为另一个按钮点击，但当我添加我的第二和第三次编码没有工作了 <html> <head>

好的，这就是我想做的，之前的解释太模糊了，所以这里有一个更好的解释，请记住，我只编写了大约2周的页面，所以非常感谢您的帮助

我需要创建一个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>


函数changeImage（）
{
var img=document.getElementById（“图像”）；
img.src=”http://cdn.memegenerator.net/images/300x/159304.jpg";
返回false；
}




单击以更改图像！
函数changeImage（）
{
var img=document.getElementById（“image1”）；
img.src=”http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg";
返回false；
}
点击更改！


函数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";
返回false；
}
点击更改！

您的页面中有几个问题：缺少文档类型声明、缺少

标题

标记、

标题

中的实际内容HTML以及多个

正文

标记。除此之外，每个

脚本

中的

changeImage（）

都会替换为一个新脚本。最后只有最后一个函数，它更改

#image2

的

src

如果我正确理解了你的问题，你需要这样的东西：

标题中的脚本
：
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;
}

如您所见，路径和标题的数据位于嵌套数组中的对象中。这样，它们与实际内容分离，代码更易于维护
<!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>

您没有提供图像标题的布局示例，因此我将标题信息放在图像上方的H1
标记中。可以随意更改元素及其位置。注意，您还可以在标题文本中使用HTML标记
但是，执行此代码时存在一些限制和CPU时间浪费：imageData
是通过每次单击创建的，每个元素只能使用两个不同的路径
我建议您使用更面向对象的方法来完成这项任务。请看一看这个，它展示了非常相似的功能，并且更灵活，可能更易于维护。
您的页面中有几个问题：缺少文档类型声明、缺少标题
标记、标题
中的实际内容HTML以及多个正文
标记。除此之外，每个脚本
中的changeImage（）
都会替换为一个新脚本。最后只有最后一个函数，它更改#image2
的src

<!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>

如果我正确理解了你的问题，你需要这样的东西：
标题中的脚本
：
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;
}

如您所见，路径和标题的数据位于嵌套数组中的对象中。这样，它们与实际内容分离，代码更易于维护
<!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>

您没有提供图像标题的布局示例，因此我将标题信息放在图像上方的H1
标记中。可以随意更改元素及其位置。注意，您还可以在标题文本中使用HTML标记
但是，执行此代码时存在一些限制和CPU时间浪费：imageData
是通过每次单击创建的，每个元素只能使用两个不同的路径
我建议您使用更面向对象的方法来完成这项任务。请看一下这个，它展示了非常相似的功能，而且更灵活，可能更易于维护。

<!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>

var-dd=5；
var-cnt=0；
函数chng（）{
var rotator=document.getElementById（'rr'）；//更改以匹配图像ID
var imageDir='Images/'；//更改为匹配Images文件夹
var images=['2.jpg'，'3.jpg'，'4.jpg'，'5.jpg']；
cnt++；
var len=images.length；
if（cnt

var-dd=5；
var-cnt=0；
函数chng（）{
var rotator=document.getElementById（'rr'）；//更改以匹配图像ID
var imageDir='Images/'；//更改为匹配Images文件夹
var images=['2.jpg'，'3.jpg'，'4.jpg'，'5.jpg']；
cnt++；
var len=images.length；
if（cnt
Chad大家好，欢迎来到Stackoverflow。你在这篇文章中提到你在先前的问题中“太含糊了”。这一个稍微好一点，但我建议您也发布代码，或者转到jsfiddle.net，在您的问题中提供一个示例，说明您遇到的问题。这将加强您的答案，以便我们可以更好地帮助您，您可以得到您的问题的答案！希望这对您有所帮助，并且，欢迎再次访问SO！这是我为第一个图像切换使用的编码，然后我尝试在更改img id时复制它，它使其余代码停止工作：函数