图像每30秒更换一次 - 循环 [英] Image change every 30 seconds - loop

问题描述

我使用的代码如下所示：

脚本：

  var images = new Array（）
 images [0] = image1.jpg; 
 images [1] =image2.jpg; 
 images [2] =image3.jpg; 
 setTimeout（changeImage（），30000）; 
 var x = 0; 
 $ b $ function changeImage（）
 {
 document.getElementById（img）。src = images [x] 
 x ++; 
} 
  

以及正文：

 < img id =imgsrc =startpicture.jpg> 
  

现在我还没有测试过这个，但是如果我的计算是正确的，它会工作:)

现在我还想要做一个渐变过渡，我希望将图像更改为循环（在所有图像显示后重新开始）。你们有没有人知道如何做到这一点？我不这样做）

解决方案

我同意使用这样的框架，只是因为它更容易。我真的很快就破解了它，只是淡化了一张图片，然后切换，在旧版本的IE中也无法使用。但是你可以看到实际淡出的代码比KARASZIIstván发布的JQuery实现长得多。

$ b

  function changeImage（ ）
 {
 var img = document.getElementById（img）; 
 img.src = images [x]; 
 x ++; 
 
 if（x> = images.length）{
 x = 0; 
} 
 
 fadeImg（img，100，true）; 
 setTimeout（changeImage（），30000）; 
} 
 
函数fadeImg（el，val，fade）{
 if（fade === true）{
 val--; 
} else {
 val ++; （val> 0&& val< 100）{
 el.style.opacity = val / 100; 
} 
 
 if 
 setTimeout（function（）{fadeImg（el，val，fade）;}，10）; 
} 
} 
 
 var images = []，
 x = 0; 
 
 images [0] =image1.jpg; 
 images [1] =image2.jpg; 
 images [2] =image3.jpg; 
 setTimeout（changeImage（），30000）; 
  

I would like to make an image change after 30 seconds...

The code I'm using looks like this:

Script:

var images = new Array()
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
var x=0;

function changeImage()
{
document.getElementById("img").src=images[x]
x++;
}

And the body:

<img id="img" src="startpicture.jpg">

Now I haven't tested this one yet, but if my calculations are correct it will work :)

Now what I also want is to make a "fading transition" and I would like the changing of images to loop (it restarts after all the images have been shown). Do any of you guys know how to do that? I don't :)

解决方案

I agree with using frameworks for things like this, just because its easier. I hacked this up real quick, just fades an image out and then switches, also will not work in older versions of IE. But as you can see the code for the actual fade is much longer than the JQuery implementation posted by KARASZI István.

function changeImage()
{
    var img = document.getElementById("img");
    img.src = images[x];
    x++;

    if(x >= images.length){
        x = 0;
    } 

    fadeImg(img, 100, true);
    setTimeout("changeImage()", 30000);
}

function fadeImg(el, val, fade){
    if(fade === true){
        val--;
    }else{
        val ++;
    }

    if(val > 0 && val < 100){
        el.style.opacity = val / 100;
        setTimeout(function(){fadeImg(el, val, fade);}, 10);
    }
}

var images = [],
x = 0;

images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);

这篇关于图像每30秒更换一次 - 循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！