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

Question

我想在 30 秒后更改图像。 我正在使用的 javascript 如下所示：

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

HTML：

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

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

现在我还想要做一个“淡入淡出的过渡”，我希望改变图像循环（在显示所有图像后重新启动）。

你们有人知道怎么做吗？

Answer 1

我同意为这样的事情使用框架，只是因为它更容易。 我很快就解决了这个问题，只是淡出图像然后切换，在旧版本的 IE 中也不起作用。 但是正如您所看到的，实际淡入淡出的代码比 KARASZI Istvá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 库，它们应该能够帮助您：

• 工具
• jQuery
• 道场工具包
• 原型

都有教程，淡入淡出是基本用法。

例如在 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插件：

拖板

它运作良好，完全符合您的要求。

Answer 4

setInterval 函数是必须使用的函数。 这是相同的示例，没有任何花哨的淡入淡出选项。 每 30 秒更改一次图像的简单 Javascript。 我假设图像保存在单独的图像文件夹中，因此 _images/ 出现在每个图像的开头。 您可以根据需要设置自己的路径。

代码：

var im = document.getElementById("img");

var images = ["_images/image1.jpg","_images/image2.jpg","_images/image3.jpg"];
var index=0;

function changeImage()
{
  im.setAttribute("src", images[index]);
  index++;
  if(index >= images.length)
  {
    index=0;
  }
}

setInterval(changeImage, 30000);

Answer 5

看看内在的淡入淡出 。 我想这是一个例子 ，我用它来做你正在做的事情。

Answer 6

只需使用它。它很简单。

<script language="javascript" type="text/javascript">
     var images = new Array()
     images[0] = "img1.jpg";
     images[1] = "img2.jpg";
     images[2] = "img3.jpg";
     setInterval("changeImage()", 30000);
     var x=0;

     function changeImage()
     {
                document.getElementById("img").src=images[x]
                x++;
                if (images.length == x) 
                {
                    x = 0;
                }
     }
</script>

并在正文中编写此代码：-

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