Question

<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张图片，但是当我尝试添加第3张或第4张时，第一张图片显示出来。我希望有人能帮助我解决这个问题。

Answer 1

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

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

也就是说，将第一张图片和一个按钮放在“＆lt; div＆gt;”中元素和第二个图像，以及第二个“＆lt; div＆gt;”内的按钮最初隐藏的元素。

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

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

Answer 2

请尝试使用此脚本块：

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

Answer 3

你非常接近！您错误地将值分配给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>

Answer 4

您可以做的是声明一个包含所有图片网址的数组：

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>

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

4 个答案: