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