图像每30秒更换一次 - 循环

Question

我想在30秒后改变图像......

我正在使用的代码如下所示:

脚本:

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++;
}

和身体:

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

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

现在我还想要做一个"渐变过渡",我希望将图像更改为循环(它会在显示所有图像后重新开始).你们中的任何人都知道怎么做吗？我不 :)

Answer 1

我同意将框架用于这样的事情,因为它更容易.我快速破解了这个,只是淡出图像然后切换,也不会在旧版本的IE中工作.但正如您所看到的,实际淡入淡出的代码比KARASZIIstván发布的JQuery实现要长得多.

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);

Answer 2

你应该看看各种javascript库,他们应该能够帮助你:

• mootools的
• jQuery的
• Dojo Toolkit
• 原型

所有这些都有教程,淡入/淡出是一个基本用法.

例如在jQuery中:

var $img = $("img"), i = 0, speed = 200;
window.setInterval(function() {
  $img.fadeOut(speed, function() {
    $img.attr("src", images[(++i % images.length)]);
    $img.fadeIn(speed);
  });
}, 30000);

Answer 3

我过去使用过这个jQuery插件:

拖板

它运作良好,完全符合您的要求.