在Javascript中单击按钮更改图像_Javascript_Html_Css_Arrays_Image

在Javascript中单击按钮更改图像

javascript html css arrays image

在Javascript中单击按钮更改图像,javascript,html,css,arrays,image,Javascript,Html,Css,Arrays,Image,我还在学习Javascripts。这是我在家的第一个任务之一。然而，即使我试着按照说明一步一步地进行操作，我似乎也无法让代码正常工作。我需要创建一个幻灯片，当我点击按钮，将有一个新的图像，直到它循环回到第一个。我检查了所有的东西，但是我仍然不知道我做错了什么。如果你能解释和帮助，我非常感激 <body onload="startup();"> <center> <img id="banner" src="images/bangkok_thailan

我还在学习Javascripts。这是我在家的第一个任务之一。然而，即使我试着按照说明一步一步地进行操作，我似乎也无法让代码正常工作。我需要创建一个幻灯片，当我点击按钮，将有一个新的图像，直到它循环回到第一个。我检查了所有的东西，但是我仍然不知道我做错了什么。如果你能解释和帮助，我非常感激

<body onload="startup();">
    <center>

    <img id="banner" src="images/bangkok_thailand.jpg"> 
    <br>
    <button onclick="cycle();">Click Here to Change Image</button>

<script>
        var imgArray = new Array();
        var index = 0;


function cycle() {
            document.getElementById("banner").src = imgArray[index].src;
            index = index + 1;
            if (index > 5 ) {
                index = 0;
            }
            return;




单击此处更改图像
var imgArray=新数组（）；
var指数=0；
功能循环（）{
document.getElementById（“banner”）.src=imgaray[index].src；
指数=指数+1；
如果（索引>5）{
指数=0；
}
返回；

}

函数启动（）
{
imgaray[0]=新图像；
imgaray[1]=新图像；
imgaray[2]=新图像；
imgaray[3]=新图像；
imgaray[4]=新图像；
imgaray[5]=新图像；
imgaray[0].src=“images/曼谷_泰国.jpg”；
imgaray[1].src=“images/paris\u france.jpg”；
imgaray[2].src=“images/seoul_southkorea.jpg”；
imgaray[3].src=“images/tokyo_japan.jpg”；
imgaray[4].src=“images/伊斯坦布尔_turkey.jpg”；
imgaray[5].src=“images/amsterdam\u荷兰”；
}
//循环（）；
返回；

首先，脚本上有一个错误的

返回值

——这会导致函数无法加载。其次，在

imgaray[x].

和

src

之间有一个空格。解决第一个问题，它应该工作，第二个问题是可选的，但你也要解决这个问题

我在下面的演示中使用。希望这有帮助




单击此处更改图像
var imgArray=新数组（）；
var指数=0；
功能循环（）{
document.getElementById（“banner”）.src=imgaray[index].src；
指数=指数+1；
如果（索引>5）{
指数=0；
}
返回；
}
函数启动（）{
imgaray[0]=新图像；
imgaray[1]=新图像；
imgaray[2]=新图像；
imgaray[3]=新图像；
imgaray[4]=新图像；
imgaray[5]=新图像；
imgaray[0]。src=”https://picsum.photos/350/300/?random";
imgaray[1]。src=”https://picsum.photos/300/300/?random";
imgaray[2]。src=”https://picsum.photos/250/300/?random";
imgaray[3]。src=”https://picsum.photos/200/300/?random";
imgaray[4]。src=”https://picsum.photos/150/300/?random";
imgaray[5]。src=”https://picsum.photos/100/300/?random";
}

在“imgaray[0]”之后（在“src”之前）有一个空格不起作用。我也修复了它，但它仍然不起任何作用。你能显示第一张图像吗？你最后的“return”在函数之外，只是四处乱飞。Javascript不喜欢这样，谢谢！我修好了，现在可以用了：）谢谢！我修好了，它成功了。我只是对//cycle（）感到困惑；在底部，因为它显示在电源点上。我仍然不确定它是什么意思，它是一个函数，但它使用的是

。不客气。欢迎来到堆栈溢出

function startup()
    {
        imgArray[0] = new Image;
        imgArray[1] = new Image;
        imgArray[2] = new Image;
        imgArray[3] = new Image; 
        imgArray[4] = new Image; 
        imgArray[5] = new Image;

    imgArray[0]. src="images/bangkok_thailand.jpg";
    imgArray[1]. src="images/paris_france.jpg";
    imgArray[2]. src="images/seoul_southkorea.jpg";
    imgArray[3]. src="images/tokyo_japan.jpg";
    imgArray[4]. src="images/istanbul_turkey.jpg";
    imgArray[5]. src="images/amsterdam_netherlands";
    }
    //cycle();
    return;


</script>
</center>