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库，他们应该能够帮助你：

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

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

CrossSlide

效果很好，完全符合你的要求。

Answer 4

看看innerfade。我认为Here's an example我用它来完成你所追求的目标。

Answer 5

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

CODE：

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 6

只需使用That.Its Easy。

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

并在Body中编写此代码： -

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

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

6 个答案: