画像間のフェージング

Question

どのように私はjQueryのを使用して、2つの画像間の回転をフェードすることができますか？ 例えば言ってます。

<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()
});

typoosがあるかもしれので、

私は、まさにこのようにこれをテストdidntの。 絶対：すべてのスライドのイメージがあるため、その位置の、div要素が配置されている場所に位置していることを周囲のdivを保証します。ダミー画像は表示されませんが、周辺のdivを作るために必要なスペースいっぱいには、実際にすべての画像をラップアラウンドありません。あなたはこれを必要としないことがあります。

あなたのイメージが同様の大きさを持つべきである、あるいは少なくともダミーが最大の画像のように、大きな通りである必要があります。

$ 2cと、 * -pike

Answer 3

私は表示された画像間のその瞬間をせずにウェブカメラの画像間のフェードへの道を探していました。私は再び表示囲まれた画像を作り、その後、囲まれた画像と背景画像を設定し、囲まれた画像をフェードアウト、背景画像として新しい画像を設定してやってます。

あなたが何かを行うことができます。

私はこの思い付います。

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

Answer 4

あなたは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 5

代わりの.css .animateとを用いてタイミングのよりよい制御

これはリールに柔らかいクロスフェードを作成します。

以前の可視画像は、次に、不透明度0とフロントへの移行等に設定されている。

行ったら

各サイクルにおいて、それは100に開始アニメーションの不透明度よりも前方の不可視画像を移動させます

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