Javascript image fading

Я не могу найти решение javascript, которое легко интегрировать в мой код. И я не хочу просто скопировать вставку, которую хотел бы понять.Javascript image fading

У меня есть базовая функция 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/ как сделать-fade-in-and-fade-out-with-javascript-and-css – dane

Вот еще один, который может быть более уместным: http://stackoverflow.com/questions/23583245/add-transition-while- change-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 image fading

ответ

Смежные вопросы