Javascript通过点击按钮将图片向右移动，第一个移到后面，然后移到前面_Javascript_Html_Image_Button

Javascript通过点击按钮将图片向右移动，第一个移到后面，然后移到前面

javascript html image button

Javascript通过点击按钮将图片向右移动，第一个移到后面，然后移到前面,javascript,html,image,button,Javascript,Html,Image,Button,我试图创建一个JavaScript代码，当按下一个按钮时，它有3个图像，看起来它们都在正常移动。到目前为止，我对代码中的JavaScript部分非常迷茫。我无法让它移动，也无法让按钮工作 HTML: 据我所知，你有3个图像在一行，你想改变他们的来源循环点击按钮希望这有帮助（顺便说一句，我认为你应该接受双引号中id属性的值）请注意，您可以更改图像数组中的源文件（如果有问题）。只需在一个函数中切换源文件，如下所示： window.slide=function（）{ var store=docu

我试图创建一个JavaScript代码，当按下一个按钮时，它有3个图像，看起来它们都在正常移动。到目前为止，我对代码中的JavaScript部分非常迷茫。我无法让它移动，也无法让按钮工作

HTML:

据我所知，你有3个图像在一行，你想改变他们的来源循环点击按钮

希望这有帮助（顺便说一句，我认为你应该接受双引号中id属性的值）

请注意，您可以更改

图像

数组中的源文件（如果有问题）。

只需在一个函数中切换源文件，如下所示：

window.slide=function（）{
var store=document.getElementById（'wink'）.src；
document.getElementById（'wink'）.src=document.getElementById（'plain'）.src；
document.getElementById（'plain'）.src=document.getElementById（'smile'）.src；
document.getElementById（'smile'）.src=store；
}

.small{
宽度：25px；
高度：25px；
}

图像切换器


右转

每次按下按钮，它都会将相同的图像作为其src属性放置。

<head>
<script src="switchright.js"> </script> 
<body>
<h1 style="text-align:center">Image Switcher</h1>
<center>
<img src="../images/smile.png" id=smile>
<img src="../images/plain.png" id=plain>
<img src="../images/wink.png" id=wink>
<br>
<button type="button" id=theButton>Switch Right</button>
</center>
</body>
</head>

theButton.onclick = function pictureChange(){
    document.getElementById('smile').src="../images/wink.png";
}
theButton.onclick = function pictureChange(){
    document.getElementById('plain').src="../images/smile.png";
}
theButton.onclick = function pictureChange(){
    document.getElementById('wink').src="../images/smile.png";
}

    // this will iterate from 0 to 2 and represents 
// the current position of wink
var position = 0;

// save the links to files in an array
var images = ["../images/wink.png", "../images/smile.png", "../images/smile.png"];

// document.getElementById() are expensive in time
// so better to save the references to the objects
// and not find them every click
var smile = document.getElementById('smile');
var plain = document.getElementById('plain');
var wink = document.getElementById('wink');

theButton.onclick = function() {

    // here you now depend on the position values that 
    smile.src = images[position % 3];
    plain.src = images[(position + 1) % 3];
    wink.src = images[(position + 2) % 3];

    // increments the position variable and checks
    // that it deosn't become beggier that 2
    position++;
    if (position > 2) {
        position = 0;
    }
}