Выцветание между изображениями

Question

Как я могу плавно вращаться между двумя изображениями, используя jQuery? Скажем, к примеру.

<img src="image01.jpg" />
<img src="image02.jpg" />

Мне нравится, что изображения постепенно исчезают, скажем, на 2 секунды каждое.

Спасибо! Очень признателен. :)

Answer 1

Простой пример, который я подбил.

<div id="imageSwap">
</div>  


 <script language="javascript" type="text/javascript">

    $(document).ready(function () {
      setImageOne();
    });

    function setImageOne() {
      $('#imageSwap').fadeIn(500).html('<img src="image01.jpg" />').delay(2000).fadeOut(500, function () { setImageTwo(); });
    }

    function setImageTwo() {
      $('#imageSwap').fadeIn(500).html('<img src="image02.jpg" />').delay(2000).fadeOut(500, function () { setImageOne(); });
    }

  </script>

Answer 2

переписать ваш HTML на

<div>
<img class="current slide" src="image01.jpg" style="position:absolute;"/>
<img class="slide" src="image02.jpg" style="position:absolute;display:none"/>
<img class="slide" src="image03.jpg" style="position:absolute;display:none"/>
<img class="dummy" src="image01.jpg" style="visibility:none;"/>
</div>

Я добавил третье изображение для ясности. Добавьте функцию jquery, например

function nextSlide() {
    jQuery('.slide.current').each(function() {
        var next = jQuery(this).next('.slide');
        if (!next.size()) next = jQuery(this).siblings('.slide').eq(0);
        jQuery(this).fadeOut().removeClass('current');
        next.fadeIn().addClass('current');
    }); 
    slidetimer=setTimeout('nextSlide()',slidespeed);
}

А в свой базовый javascript добавьте

var slidespeed = 2000;
var slidetimer = null;
jQuery(document).ready(function() {
    nextSlide()
});

Я не проверял это в точности так, так что типусы могут быть там. Окружающий элемент div гарантирует, что все слайд-изображения расположены в том месте, где расположен элемент div, из-за их положения: абсолютно. фиктивное изображение не видно, но оно заполняет пространство, необходимое для того, чтобы окружающий div фактически обернул все изображения. Вам это может не понадобиться.

Ваши изображения должны иметь одинаковые размеры или, по крайней мере, макет должен быть таким же большим, как самое большое изображение.

$ 2с, * -Pike

Answer 3

Вы можете сделать это без jquery. Только с css: И круто исчезают между изображениями

.fade img {
  transition: all .8s;
  max-width: 200px;
}
.fade:hover img:nth-child(2) { 
	opacity: 0;
}
.fade img:first-child { 
  position: absolute;
	z-index: -1;
}

<div class='fade'>
  <img src="https://image.freepik.com/free-vector/software-logo_1103-316.jpg">
  <img src='https://image.freepik.com/free-vector/m-letter-logo-template_1061-150.jpg'>
</div>

Answer 4

Лучший контроль времени, используя вместо этого .animate и .css

Это создаст катушку с мягким перекрестным затуханием.

В каждом цикле он перемещает невидимое изображение спереди, затем запускает непрозрачность анимации до 100. После этого предыдущее видимое изображение устанавливается на непрозрачность 0 и перемещается вперед и т. Д.

<div>
        <div id="imageSwapA"  style="display:block; z-index:100; opacity:0;">
                <img src="imagea.png"/>
        </div>
        <div id="imageSwapB" style="display:block; z-index:101; opacity:0;">
                <img src="imagea.png"/>
        </div>
</div>

<script>
    $(document).ready(function () {

        setRollOne(); // <- animation can be triggered 

        function setRollOne() {
            $('#imageSwapA').css({'z-index':101}).animate({'opacity':1}, 3500, function(){
                    $('#imageSwapB').css({'opacity':0});
                    $('#imageSwapA').css({'z-index':100});
                    setTimeout(function(){ setRollTwo(); }, 1500);
            });
        }
        function setRollTwo() {
            $('#imageSwapB').css({'z-index':101}).animate({'opacity':1}, 3500, function(){
                    $('#imageSwapA').css({'opacity':0});
                    $('#imageSwapB').css({'z-index':100});
                    setTimeout(function(){ setRollOne(); }, 1500);
            });
        }
    });
</script>

Answer 5

Я искал способ исчезновения между изображениями с веб-камеры, не имея этого момента между отображаемыми изображениями. То, что я делаю, это установка нового изображения в качестве фонового изображения, затемнение вложенного изображения, установка фонового изображения в качестве вложенного изображения, а затем повторное отображение вложенного изображения.

Вы могли бы что-то сделать

Я придумал это.

<style type="text/css">
    #webcamImageDiv {
        text-align: center;
        background-image: url('webcam.jpg');
        background-position: top center;
        background-repeat: no-repeat;
    }
</style>

<div id="webcamImageDiv">
    <img id="webcamImageImg" src="webcam.jpg" alt="Image Not Available" />
</div>

<script type="text/javascript">

    var refreshMillis = 10000;

    function refreshWebcam() {

      // set the div to the height of the image
      $("#webcamImageDiv").height( $("#webcamImageImg").height() );

      // get the path to the new image
      // (in your case, your other image)
      var newImg = "webcam.jpg?t=" + new Date().getTime();

      // set the background of the div
      $("#webcamImageDiv").css("background-image","url('" + newImg + "')");

      // fade out the image
      $("#webcamImageImg").fadeOut(500, function() {

        // update the img tag, show the image
        $("#webcamImageImg").removeAttr("src").attr("src", newImg).show();

        // do it again
        window.setTimeout(getWebcam, refreshMillis);
      });
    }

    $(document).ready( function() {
      window.setTimeout(refreshWebcam, refreshMillis);
    });
</script>