使用JS和HTML中的数组循环图片

时间:2015-11-17 18:55:37

标签: javascript html arrays

这适用于按钮单击,这就是它的意图。问题在于它使用隐藏图像而不是存储在数组中的图像。你能否告诉我如何做到这一点,以便将图像存储在一个数组中。

<!doctype html>
<html>
<body>
    <div id="splash">
         <img src="TrafficLightRed.gif" alt="" id="mainImg">
    </div>
    <div id="wrapper">
        <div>
            <button id="clickme" onclick="changeLight();">Click to change</button>
            <img src="TrafficLightRed.gif" hidden>
            <img src="TrafficLightYellow.gif" hidden>
            <img src="TrafficLightGreen.gif" hidden>
        </div>
    </div>

    <script>

        function changeLight() {
            var currentImg = document.getElementById("mainImg");
            for(var i=1;i<3;i++) {
                if(document.images[i].src == currentImg.src) {
                    currentImg.src = document.images[i + 1].src;
                    return;
                }
            }
            currentImg.src = document.images[1].src;
        }
     </script>
</body>

</html>

2 个答案:

答案 0 :(得分:0)

您可以将图像imagesArray = ["TrafficLightRed.gif","TrafficLightYellow.gif","TrafficLightGreen.gif" ]; 存储在数组中:

document.images[i + 1].src

使用数组代替... for(var i=0;i<imagesArray.length;i++) { if(imagesArray[i] == currentImg.src) { currentImg.src = imagesArray[i]; return; } } ...

for(int i=0; i<100; i++)
{
    Integer n = new Integer((int) (Math.random()*100));
    ran.startValue(n);      //this is my add function, to add elements in list
    System.out.print(n+" ");

  if(i%5==0)System.out.println("");
}

答案 1 :(得分:0)

这应该做的工作:

raw_scale=255

现在,您可以向阵列... <script> var images = ["TrafficLightRed.gif", "TrafficLightYellow.gif", "TrafficLightGreen.gif"]; var currentIndex = 0; function changeLight() { var currentImg = document.getElementById("mainImg"); currentImg.src = images[(currentIndex++) % images.length]; } </script> ... 添加更多图像,它将自动循环遍历此阵列。