Javascript将图片向右移动，第一个到后面，点击一个按钮就到前面答案

【问题标题】：Javascript move picture to the right where the first goes to the back comes to the front with the click of a buttonJavascript将图片向右移动，第一个到后面，点击一个按钮就到前面
【发布时间】：2015-05-22 21:39:36
【问题描述】：

我正在尝试创建一个 JavaScript 代码，该代码在按下按钮时显示 3 张图像，看起来它们都在向右移动。到目前为止，我对代码的 JavaScript 部分非常迷茫。我不能让它移动，或者按钮工作。

HTML：

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

Javascript：

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";
}

【问题讨论】：

每次你点击按钮时，它都会保持与它的 src 属性相同的图像。

标签： javascript html image button

【解决方案1】：

据我了解 - 您连续有 3 张图像，并且您想通过单击按钮循环更改它们的来源。

希望这会有所帮助（顺便说一句 - 我认为你应该在双引号中包含 id 属性的值）

    // 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;
    }
}

请注意，您可以更改 images 数组中的源（如果有问题的话）。

【讨论】：

【解决方案2】：

像这样在一个函数中切换源：

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 {
    width: 25px;
    height: 25px;
}

<h1 style="text-align:center">Image Switcher</h1>
<center>
<img class="small" src="http://www.costarricense.cr/pagina/radiogigante/index_files/image007.gif" id="smile">
<img class="small" src="http://www.skip-hop.co.uk/images/skip-hop-number-2.gif" id="plain">
<img class="small" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/L3lo.gif" id="wink">
<br>
<button type="button" onclick="slide()">Switch Right</button>
</center>

【讨论】：