Question

我正在尝试创建一个程序，通过将数组中的数字更改为保存文件的相应数字，它将在一组图像中移动。

coolimg.1.jpg coolimg.2.jpg coolimg.3.jpg 等...

这是我尝试过的，我没有运气，我认为我的逻辑是正确的，通过在计数器上添加一个可以改变数组编号。

任何帮助都会很棒。感谢

<html>
<title>Image Array Demo</title>
<img id="myImg" 
src="coolimg.1.jpg" 
width ='100' 
height='100'/>

<button id='buttonId' 
onClick='change_image(event, this)'> 
click me </button>

<script>
var myImages = [1, 2]
var img_index = 0;
var imgId = "myImg";
var buttonId = 'buttonId'
//document.getElementById(buttonId).onClick = change_image();

function change_image() {
    img_index++;
        this.src = "coolimg." + myImages[img_index] + ".jpg"

    if (img_index == myImages.length){
        img_index = 0;
    }


}

</script>
</html>

Answer 1

这是你需要做的：

document.getElementById("me").src = "coolimg." + myImages[img_index] + ".jpg";

Answer 2

删除以下行（也不正确）document.getElementById(buttonId).onClick = change_image();因为您已经在html中指定了事件处理程序，即<button id='buttonId' onClick='change_image()'>。更好地传递像这样的事件和元素对象

<button id='buttonId' onClick='change_image(event, this)'>

除此之外，在change_image函数中你指的是变量me，我想它应该是图像对象，用this替换它。

选中此fiddle

由于我无法使用img.1.jpg img.2.jpg这样的静态图像显示演示，我已经使用了一些随机图像，这些图像会随着按钮的变化而改变。

var myImages = ['http://data.whicdn.com/images/12921361/superthumb.jpg',
            'https://s-media-cache-ak0.pinimg.com/736x/dd/c2/b5/ddc2b51faa1955195f64cedddb72cfcb.jpg'];

var img_index = 0;
function change_image() {

    //here "this" will point to button, 
    //the element which is clicked ie event occurred.

    //but we need image, so get it by using below statement
    var img = document.getElementById("myImg");

    img_index = ++img_index % 2; //replace 2 with number of images
    img.src = myImages[img_index];
}

示例类似，但尝试着点。您只需使用document.getElementById获取图像对象，然后使用该更改src属性。最后，img_index = ++img_index % 2;此逻辑将从0,1,0,1 ...更改为在数组中获取下一个输入（当它到达结束时，它从使用%运算符开始）。

使用javascript

2 个答案: