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

【问题标题】：Image change every 30 seconds - loop图像每 30 秒更换一次 - 循环
【发布时间】：2011-03-16 22:29:37
【问题描述】：

我想在 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">

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

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

你们中有人知道怎么做吗？

【问题讨论】：

我以前用过这个 jQuery 插件：CrossSlide 它工作得很好，完全符合你的要求。
看看innerfade。 Here's an example 我想我用它来做你所追求的。
setTimeout 只调用一次；你正在寻找setInterval。运行的代码也应该是函数引用，而不是字符串。所以var timerid = setInterval(changeImage, 30000);
你说的完全正确！

标签： javascript html image loops

【解决方案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);

【讨论】：

您可以使用一些简单的替代方法改进代码并节省空间：x = (x + 1) % images.length;、val = val + (fade ? -1 : 1);、var images = ["image1.jpg", "image2.jpg", "image3.jpg"];。

【解决方案2】：

你应该看看各种 javascript 库，它们应该能够帮助你：

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

例如在 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);

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

只需使用 That。它很容易。

<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">

【讨论】：