使用Javascript幻燈片顯示FadeOut/FadeIn事件

因此，我構建了一個相當簡單的幻燈片演示，但無法完全弄清楚如何合併淡入/淡出效果。我讀過最好使用JQuery，但也有人建議標準JavaScript也可以做到這一點 - 無論如何，我已經嘗試過幾種腳本，但似乎都沒有效果。如果有人在這裏可以幫忙，我會在他們的債務！使用Javascript幻燈片顯示FadeOut/FadeIn事件

這裏是我的代碼：

<script type = "text/javascript"> 
    var Image = new Array("pics/21cents.png", "pics/22cents.png", "pics/23cents.png"); 
    var Image_Number = 0; 
    var Image_Length = Image.length - 1; 
    var x; 
    function change_image(num) { 
     Image_Number = Image_Number + num; 
     if (Image_Number > Image_Length) { 
      Image_Number = 0; 
     } 
     if (Image_Number < 0) { 
      Image_Number = Image_Length; 
     } 
     document.slideshow1.src=Image[Image_Number]; 
     return false; 
    } 
    function auto() { 
     x = setInterval("change_image(-1)", 5000); 
    } 
    function stop() { 
     clearInterval(x); 
    } 
    auto(); 
</script>

來源

2014-02-26 user3357403

有可能是沒有一個簡單的方法來做到這一點沒有一些libraray，看到了這個問題：？使用JavaScript沒有jQuery的淡入淡出效果（http://stackoverflow.com/questions/5104053/fade - 效應 - 使用JavaScript的，沒有的jQuery）。用jQuery你真的可以縮短代碼。 – gskema

做到這一點，最簡單的方法是目前爲止通過使用jQuery。除了一些有用的UI效果（例如slideDown()，等）外，您還可以輕鬆地選擇和操作DOM元素。

舉例來說，如果你要使用jQuery這將是那麼容易，因爲是這樣的：

var $img = $("<img>").css({"display": "none"}).prop("src", "http://placehold.it/500x500"); 
$("div").html($img); 
$("img").fadeIn();

否則得到淡入/淡出效果，你必須設置setInterval()循環somesort，改變在每次迭代時以不透明度爲百分比。 EG：

setInterval(function() { 
    var img = document.getElementById("image"); 

    var opacity = img.style.opacity; 
    if(opacity !== 1) { 
     img.style.opacity += 0.01; 
    } 
}, 100);

來源

2014-02-26 19:51:08 user2521439

謝謝你，我決定使用你列出的JavaScript代碼.....但是你如何將這段代碼添加到我現有的幻燈片代碼中？我會打開一個單獨的腳本標記並將其粘貼到那裏嗎？還是將該代碼粘貼到同一個JS標記中？再次感謝！ – user3357403

你的意思是jQuery代碼或不透明的東西？（PS如果你喜歡答案，你可以接受:) :) – user2521439

不透明的東西！ :) – user3357403

使用Javascript幻燈片顯示FadeOut/FadeIn事件

回答

相關問題