Fatal编程技术网

图像数组javascript自动化

javascript arrays image

图像数组javascript自动化,javascript,arrays,image,Javascript,Arrays,Image,我正在做一些改变数组中图像的代码，我已经到了图像自动改变的程度，但是我想在图像改变时得到不同的时间。我正在用Dreamweaver编写代码 以下是目前的代码： <!DOCTYPE html> <html> <body> <img src="image1.png" width="74" height="208" id="image1"> <br> <button onclick="clearInterval(MyVar)"&

我正在做一些改变数组中图像的代码，我已经到了图像自动改变的程度，但是我想在图像改变时得到不同的时间。我正在用Dreamweaver编写代码

以下是目前的代码：

<!DOCTYPE html>
<html>
<body>


<img src="image1.png"   width="74" height="208" id="image1">
<br>
<button onclick="clearInterval(MyVar)">Stop Sequence</button>

<script>

MyVar = setInterval(ChangeImages, 1000)

function Start() {
myVar = setInterval(ChangeImages, 1000)
}


var Images = ["image1.png", "image2.png","image3.png","image4.png"];


var image = document.getElementById("image1");




function ChangeImages()
{
    if (image1.src.match(Images[0]))

     {
        image.src = Images[1];

    } else if (image1.src.match(Images[1]))

     {
        image.src = Images[2];
    } else if (image1.src.match(Images[2]))

     {
        image.src = Images[3];
    } else if (image1.src.match(Images[3]))

     {
        image.src = Images[0];

    }
}
</script>

<br>

<Button onclick="Start() ">Resume</button>

</body>

</html>




停止序列
MyVar=setInterval（ChangeImages，1000）
函数Start（）{
myVar=setInterval（ChangeImages，1000）
}
var Images=[“image1.png”、“image2.png”、“image3.png”、“image4.png”]；
var image=document.getElementById（“image1”）；
函数ChangeImages（）
{
if（image1.src.match（Images[0]））
{
image.src=图像[1]；
}else if（image1.src.match（Images[1]））
{
image.src=图像[2]；
}else if（image1.src.match（Images[2]））
{
image.src=图像[3]；
}else if（image1.src.match（Images[3]））
{
image.src=Images[0]；
}
}


简历
任何帮助都将不胜感激

谢谢

如果您想更改每次的秒数，可以使用setTimeout而不是setInterval，然后在ChangeImages结束时进行回调。并使用随机数生成器获取毫秒数。在下面的示例中，我将其设置为1000、2000或3000毫秒

<img src="image1.png"   width="74" height="208" id="image1">
<br>
<button onclick="clearInterval(myVar)">Stop Sequence</button>

<script>

function Start() {
   myVar = setTimeout(ChangeImages, randomInterval(1,3));
}
var Images = ["image1.png", "image2.png","image3.png","image4.png"];
var image = document.getElementById("image1");
function randomInterval(min,max)
{   var number = (Math.floor(Math.random()*(max-min+1)+min))*1000;
   console.log(number);
    return number;
}

function ChangeImages(){
    if (image1.src.match(Images[0])){
        image.src = Images[1];
    }
    else if (image1.src.match(Images[1])){
      image.src = Images[2];
    }
    else if (image1.src.match(Images[2])){
      image.src = Images[3];
    }
    else if (image1.src.match(Images[3])){
        image.src = Images[0];
    }
    Start();
}
</script>

<br>

<Button onclick="Start() ">Resume</button>
当前的问题是什么？什么是不同的时间，应该如何设置？很好的故事。你有什么问题吗？我想在图像变化时在图像之间有不同的时间，但我想得到一些关于如何做到这一点的帮助。我想让图像1到图像2有2秒的延迟，例如，在2到3之间有5秒的延迟，目前，每个图像更改之间有1秒的延迟。如果我希望每个图像之间有一个设定的时间，这样图像的每次旋转都是相同的，该怎么办？然后将一个参数传递到Start函数，并在条件语句中调用它。请看我的文章中的编辑。这很有效。谢谢你，你有没有机会知道如何在第二张图片改变之前使其闪烁？ 
function Start(timeout) {
   myVar = setTimeout(ChangeImages, timeout);
}
var Images = ["image1.png", "image2.png","image3.png","image4.png"];
var image = document.getElementById("image1");

function ChangeImages(){
    if (image.src.match(Images[0])){
      image.src = Images[1];
      Start(1000);
    }
    else if (image.src.match(Images[1])){
      image.src = Images[2];
      Start(2000);
    }
    else if (image.src.match(Images[2])){
      image.src = Images[3];
      Start(3000);
    }
    else if (image.src.match(Images[3])){
      image.src = Images[0];
      Start(4000);
    }
}