Javascript Girl
  1. Javascript Girl
  3. Fade In / Fade Out images d'arrière plan sans fond blanc
Intereting Posts
Ajax upload not working codeigniter Défiler vers l'élément li – jquery Comment imprimer la chaîne html en tant que html Angular 2 – comment utiliser le nouveau routeur angulaire 2.0.0-rc.1 Convertir la date de la chaîne dans javascript Test unitaire angular-bootstrap $ modal Question de rappel JQuery Nested _.max () avec lodash Ajouter dynamiquement des propriétés à l'objet prototype Comment analyser les dates d'inventaire des amateurs Comment obtenir des données avec JavaScript à partir d'un autre serveur? JavaScript dans les meilleures pratiques de Shadow DOM Comment appelez-vous une fonction JavaScript (AJAX) lorsque l'utilisateur arrive à la fin d'une page pour charger un nouveau contenu? Javascript get function body Afficher l'affichage: aucun div après actualisation

Fade In / Fade Out images d'arrière plan sans fond blanc

Je veux créer un site Web avec des images d'arrière-plan qui changent avec le temps avec un fondu / effet de fondu, mais je ne veux pas utiliser l'effet de fondu / décoloration jQuery existant, car quand une image s'est évanouie, un fond blanc Est apparu avant l'apparition d'une autre image. J'ai trouvé un plugin nommé Maximage qui convient à ma requête, mais il utilise des étiquettes img pendant que je veux travailler avec un CSS d'arrière-plan (j'ai une bonne raison de le faire). Est-ce que quelqu'un sait comment faire ça?

Voici mon code HTML: 

<div id="wrapper"> //My contain here </div>

Voici mon code JavaScript jusqu'à présent: 

 //Auto change Background Image over time $(window).load(function() { var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg']; var i = 0; function changeBackground() { $('#wrapper').fadeOut(500, function(){ $('#wrapper').css('background-image', function () { if (i >= images.length) { i = 0; } return 'url(' + images[i++] + ')'; }); $('#wrapper').fadeIn(500); }) } changeBackground(); setInterval(changeBackground, 3000); });

Exemple: http://www.aaronvanderzwan.com/maximage/examples/basic.html

AHH! Finalement ! J'ai trouvé une belle technique! J'utilise une double enveloppe.

Le problème dans votre code est un peu logique. Vous ne pouvez pas faire fadeOut et fadeIn en même temps un seul wrapper.

Donc, l'idée est de créer deux wrappers et de les changer entre eux. Nous avons un wrapper appelé: "wrapper_top" qui encapsule le second wrapper appelé "wrapper_bottom". Et la magie était de mettre à côté de la seconde enveloppe: votre contenu.

Ainsi, la structure est prête, ce qui est le suivant: 

 <div id='wrapper_top'> <div id='content'>YOUR CONTENT</div> <div id='wrapper_bottom'></div> </div>

Ensuite, un peu de JS + CSS et voilà! Ce sera dynamique avec n'importe quelle quantité d'images !!!

Voici la mise en œuvre: http://jsbin.com/wisofeqetu/1/ 

 <html> <head> <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function() { var i =0; var images = ['image2.png','image3.png','image1.png']; var image = $('#slideit'); //Initial Background image setup image.css('background-image', 'url(image1.png)'); //Change image at regular intervals setInterval(function(){ image.fadeOut(1000, function () { image.css('background-image', 'url(' + images [i++] +')'); image.fadeIn(1000); }); if(i == images.length) i = 0; }, 5000); }); </script> </head> <body> <div id="slideit" style="width:700px;height:391px;"> </div> </body> </html>

Si cela ne doit pas être une image de fond, vous pouvez placer toutes les images dans votre #wrapper, in <img> , cela fonctionnera comme un charme: 

 <div id="wrapper"> <img src="firstImage" class="imageClass"></img> <img src="secoundImage" class="imageClass"></img> <img src="thirdImage" class="imageClass"></img> </div>

Puis un peu de style. Chaque image doit être dans le même endroit, alors ajoutez la position relative à #wrapper et positionnez absolument à .imageClass: 

 #wrapper{ position: relative; } .imageClass{ position: absolute; top: 0; left: 0; display: none; }

Affichage: aucun; Masquer toutes les images.

Maintenant, certains JQuery. Pour afficher la première image lorsque le chargement de la fenêtre écrivez ceci: 

 $(window).load(function() { $('.imageClass').eq(0).show(); });

Par la .eq () "commande" vous pouvez spécifier quel élément avec la classe '.imageClass' que vous souhaitez utiliser exactement. Commence par 0. Ensuite, faites quelque chose comme ça: 

  function changeBackground() { var current = 0; //tells which image is currently shown if(current<$('.imageClass').length){ //loop that will show first image again after it will show the last one $('.imageClass').eq(current).fadeOut(500); current++; $('.imageClass').eq(current).fadeIn(500); } else { $('.imageClass').eq(current).fadeOut(500); current=0; $('.imageClass').eq(current).fadeIn(500); } } changeBackground(); setInterval(changeBackground, 3000); });

Cela devrait fonctionner, j'espère que vous l'aimerez.