如何使用按钮切换4个图像

<html> 
<head> 
<title>How To Insert an Image</title> 
<script> 

function changeImage(){ 
var img = document.getElementById('image'); 
image.src='image4.jpg'; 
} 

</script> 

</head> 
<body> 
<img id="image" src="image1.jpg" /> 

<br><br><br> 
<button id="clickme" onclick="changeImage();">Click to change image!</button> 

</body> 
</html>

我对JavaScript很新颖，所以请不要太苛刻。基本上我试图用一个按钮从一张图片切换到另一张图片。到目前为止，这个代码我只设法做2张图片，但是当我尝试添加第三张或第四张第一张图片时，我希望有人能帮我解决这个问题。如何使用按钮切换4个图像

来源

2016-01-01 Owen

你的例子没问题。当你想使用其他图像会发生什么？请详细解释一下。 – abeyaz

这是我以前使用过的最简单的方法，用于两张图像。轻松扩展以容纳三个，四个或更多替代图像。

<div id="image1"> 
    <img ... > 
    <button ...> 
</div> 
<div id="image2" style="display: none"> 
    <img ... > 
    <button ...> 
</div>

即，把所述第一图像，和一按钮，“< DIV>”元素中，和第二图像，而这最初是隐藏的第二“< DIV>”元素内的按钮。

然后，每个按钮的javascript只需要将其自己的div的CSS样式设置为“display：none”，并从其他div元素中删除此样式，从而有效隐藏一个图像并显示另一个图像。

这种方法也可以相应地更新按钮的文本或标签。如果两个按钮具有相同的标签，唯一明显的结果是图像改变。

来源

2016-01-01 15:42:21

您能否将该代码合并到我的所以我知道我在做什么，因为正如我所说，即时通讯非常新的JavaScript。谢谢 – Owen

看来你在错误的网站上。这不是您让别人为您编写代码的网站。 –

试试这个脚本块来代替：

<script> 

var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg'] 

function changeImage() { 
    var img = document.getElementById('image') 
    var url = images.shift() // remove first url from list 
    image.src = url // use it 
    images.push(url) // append url to the end of the list 
} 

</script>

来源

2016-01-01 15:44:46

嗨，感谢您的快速响应。请你将这个脚本块合并到我的代码中，然后显示出来，以便我可以测试它。我已经把它放到我的代码中，但它似乎并没有工作，所以你可以把它放到我的代码中，这样我就可以正确地测试它，因为正如我所说的即时通讯新的JavaScript。谢谢 – Owen

你非常接近！您只是错误地将值分配给image.src而不是img.src。看看下面的代码:)

使用点击：

<html> 
 
<head> 
 
<title>How To Insert an Image</title> 
 
<script> 
 
    i = 1; /*Default value, only executed when the page is loaded (default is the first image, so when i + 1 the second image is displayed on first click.)*/ 
 
    
 
function changeImage(){ 
 
    var img = document.getElementById('image'); 
 
    i = i + 1; /*next image*/ 
 
     
 
     if(i == 5) /* if end is reached, reset to first image*/ 
 
     { 
 
      i = 1; 
 
     } 
 

 
     img.src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image' + i + '.jpg'; /*number to text in variable, so image + 'number of the image (i)' + extension(.jpg in this case)*/ 
 
    } 
 

 
</script> 
 
</head> 
 
<body> 
 
<img id="image" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" height="100px" /> 
 

 
<br><br><br> 
 
<button id="clickme" onclick="changeImage();">Click to change image!</button> 
 

 
</body> 
 
</html>

自动图像滑块

<html> 
 
<head> 
 
<title>How To Insert an Image</title> 
 
<script> 
 
    i = 1; /*Default value, only executed when the page is loaded (default is the first image, so when i + 1 the second image is displayed on first click.)*/ 
 
    
 
setInterval(function changeImage(){ 
 
    var img = document.getElementById('image'); 
 
    i = i + 1; /*next image*/ 
 
     
 
     if(i == 5) /* if end is reached, reset to first image*/ 
 
     { 
 
      i = 1; 
 
     } 
 

 
     img.src='image' + i + '.jpg'; /*number to text in variable, so image + 'number of the image (i)' + extension(.jpg in this case)*/ 
 
    }, 5000) 
 

 
</script> 
 
</head> 
 
<body> 
 
<img id="image" src="image1.jpg" height="100px" /> 
 

 

 

 
</body> 
 
</html>

来源

2016-01-01 15:51:07 Evochrome

我怎么会使用该代码合并4个图像，所以它切换4图像，而不是2.对不起，但即时通讯仍然新，这一切似乎有点复杂 – Owen

看看更新的代码，如果你仍然有问题，随时问:) – Evochrome

哪里是更新的代码？ – Owen

你什么可以做的是声明，其中包含您的所有图片网址数组：

var imageUrls = ["image2.jpg", "image3.jpg", "image4.jpg", "image1.jpg"];

然后点击按钮时，您从阵列使用shift删除第一个图像URL并将其赋值给变量imageUrl。然后，您将imageUrl设置为页面上图像元素的src属性。然后使用push在数组的末尾添加imageUrl。

这将在每次点击时旋转imageUrls阵列中的图像。

<html> 
<head> 
    <title>How To Insert an Image</title> 
    <script> 

     var imageUrls = ["image2.jpg", "image3.jpg", "image4.jpg", "image1.jpg"]; 
     function changeImage(){ 
      var img = document.getElementById('image'); 
      var imageUrl = imageUrls.shift(); 
      img.src = imageUrl; 
      imageUrls.push(imageUrl); 
     } 

    </script> 

</head> 
<body> 
<img id="image" src="image1.jpg" /> 

<br><br><br> 
<button id="clickme" onclick="changeImage();">Click to change image!</button> 

</body> 
</html>

来源

2016-01-01 16:33:29

非常感谢您解决了一个问题，我一直试图解决几个星期！再一次非常感谢你 – Owen

最后一个问题，我如何设置一个计时器，让我们说5秒后它将图像更改为下一个等等？ – Owen

您可以使用[setTimeout]（https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout）或[setInterval]（https://developer.mozilla.org/en-US /文档/网络/ API/WindowTimers/setInterval的）。 –

如何使用按钮切换4个图像

回答

相关问题