Fading entre les images

Question

Comment puis-je faire pivoter entre deux images à l'aide de jQuery? Dites par exemple. J'aime les images à fondre en entrée/sortie entre par exemple 2 secondes chacune.

Merci! Très appréciée. :)

Answer 1

Un exemple simple j'ai frappé.

<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

Ressaisissez votre code 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> 

J'ai ajouté une 3ème photo pour plus de clarté. Ajoutez une fonction jquery comme

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

Et dans votre javascript de base, ajouter

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

Je ne ai pas tester ce exactement comme ça, alors typoos peut être là. La div environnante s'assure que toutes les images de diapositives se trouvent à l'endroit où se trouve la div, en raison de leur position: absolue. l'image factice n'est pas visible, mais remplit l'espace nécessaire pour que la div environnante entoure toutes les images. Vous n'avez peut-être pas besoin de cela.

Vos images doivent avoir des tailles similaires, ou au moins le mannequin doit être aussi grand que la plus grande image.

2c, $ * -pike

Answer 3

Je cherchais un moyen de disparaître entre les images de webcam sans ce moment entre les images affichées. Ce que je fais est de définir la nouvelle image comme une image de fond, fondu sur l'image ci-jointe, définissant l'image d'arrière-plan comme l'image ci-jointe, puis rendant l'image ci-jointe visible à nouveau.

Vous pouvez faire quelque chose

je suis venu avec cela.

<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

Un meilleur contrôle de la synchronisation à l'aide .animate et Css au lieu

Cela va créer une bobine d'un fondu enchaîné doux.

A chaque cycle, il déplace l'image invisible à l'avant que de commencer l'opacité d'animation à 100. Une fois fait l'image visible précédente est ensuite réglé sur 0 opacité et passer à l'avant, etc.

<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

Vous pouvez fais-le sans jquery. Seulement avec css: et fade fraîche entre l'image

.fade img { 
 
    transition: all .8s; 
 
    max-width: 200px; 
 
} 
 
.fade:hover img:nth-child(2) { 
 
\t opacity: 0; 
 
} 
 
.fade img:first-child { 
 
    position: absolute; 
 
\t 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>