Javascript多个图像更改与按钮单击

好吧，这就是我想要做的，它是早些时候太模糊，所以这里有一个更好的解释，请记住，我只编程了2周的页面，所以任何帮助表示赞赏。Javascript多个图像更改与按钮单击

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

来源

2012-11-04 Circus

嗨乍得，欢迎来到Stackoverflow。你在这篇文章中提到你在前面的问题中“太模糊”了。这个更好一点，但我建议你也发布你的代码，或者转到jsfiddle.net，并在你的问题中提供一个例子来说明你遇到的问题。这会加强你的答案，所以我们可以更好地帮助你，你可以得到你的问题的答案！希望这可以帮助你一点，并再次欢迎SO！ – JasCav

这是我用于第一图像切换的编码，然后我试图复制它，同时改变IMG ID和它使得代码停止工作的其余部分：） – Circus

<按钮ID = “clickme” 的onclick = “changeImage（）;”>点击来改变图像！ – Circus

有在你的页面的几个问题：缺少文档类型声明，缺少title标签，实际内容的HTML head和多body标签。除此之外，changeImage()在每个script中被替换为新的。最后将只有最后一个功能，它将src更改为#image2。

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

的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，它表现出非常相似的功能，并且更灵活，也许更容易维护。

来源

2012-11-04 15:14:11 Teemu

非常感谢有关编码的查阅和帮助，我很感激。 – Circus

工作就像一个魅力，我没有意识到我可以将所有3个脚本编码成一个，并认为我必须分开他们各自由于布局（非常新，如我所说），非常感谢。 – Circus

谢谢，我想也许我的JSFiddle太重了=）。您是否访问过https://developer.mozilla.org/en-US/，在那里您可以找到有关JS，CSS，HTML等的基础知识和高级信息。 – Teemu

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

来源

2013-04-19 08:22:32

Javascript多个图像更改与按钮单击

回答

相关问题