Javascript圖像褪色

我找不到任何可以輕鬆集成到我的代碼的JavaScript解決方案。而我不想只複製粘貼，我想了解。Javascript圖像褪色

我有一個基本的javascript功能，每3秒更換一次圖像，我想讓圖像在過渡時消失，使其看起來更好一點。

JS：

<script type = "text/javascript"> 
     function nextImage() { 
       x = (x === imgArray.length - 1) ? 0 : x + 1; 
      document.getElementById("img").src = imgArray[x]; 
      } 

      function begintimer() { 
       setInterval(nextImage, 3000); 
      } 

      var imgArray = [], x = -1; 
      imgArray[0] = "images/test.jpg"; 
      imgArray[1] = "images/bg.jpg"; 
</script>

HTML：

<body onload = "begintimer()"> 
    <div id="section1"> 
     <img id="img" src="images/bg.jpg"/> 
    </div> 
</body>

感謝您的幫助！

來源

2016-03-29 Crimson-Med

退房此鏈接：http://stackoverflow.com/questions/6121203/怎麼做淡入淡出-with-javascript-and-css – dane

這裏有另一個可能更相關的：http://stackoverflow.com/questions/23583245/add-transition-while- changing-img-src-with-javascript – aw04

這一個看起來真的很有趣，但如果我碰巧有三個圖像，我需要更新隱藏和當前每一個圖像的變化嗎？ –

如果有人遇到這個，這是我最後使用jQuery和JavaScript編碼最簡單，最全面的版本：

<script src="jquery.js"></script> 
<script type = "text/javascript"> 
     function nextImage() { 
      x = (x === imgArray.length - 1) ? 0 : x + 1; 
      $("#img").fadeOut(400, function() { 
       $("#img").attr("src",imgArray[x]); 
      }).fadeIn(400); 
     } 

     function begintimer() { 
      setInterval(nextImage, 5000); 
     } 

     var imgArray = [], x = -1; 
     imgArray[0] = "images/test.jpg"; 
     imgArray[1] = "images/bg.jpg"; 
</script>

來源

2016-03-29 19:58:36

Javascript圖像褪色

回答

相關問題