Javascript Girl
  1. Javascript Girl
  3. Image Crossfade avec les transitions Javascript et CSS3
Intereting Posts
L'événement de cliquet Selenium ne déclenche pas l'événement angularjs Conway jeu de vie en javascript (meilleur sol Vérifiez l'espace pressé puis ajoutez l'étiquette diez en utilisant jquery avec plusieurs langues React-router: Comment appeler manuellement Link? Injecter des services dans un autre service angulaire 2 Pourquoi ma page fonctionne-t-elle dans le mode IE7 d'IE9, mais pas dans IE7 lui-même? React-native android n'a pas pu charger js bundle: les modifications dans index.android.js ne peuvent pas voir dans apk Pourquoi l'évaluation d'une chaîne définissant une fonction retourne-t-elle indéfinie au lieu de la fonction? Pourquoi Math.min ()> Math.max ()? Une fonction Javascript renvoie les objets par référence ou valeur par défaut? Remplacer les caractères de citation par de meilleurs NEH Marco illustrd illustrd illustrfreddachachachachachachachindélemuseadégie affichidence illustrdddachachachachinhaeaddélempeadidence aledand aledache aleddeter aleddégea aledande aledande aledd alededo aleea aledand aledande aledd alededo ale Valider un formulaire en utilisant JavaScript Cross Browser Selection Range Library? La fonction a été utilisée avant sa définition – JSLint

Image Crossfade avec les transitions Javascript et CSS3

J'essaie d'obtenir des images dans un diaporama pour fusionner en fusion en utilisant des transitions CSS3. J'ai le diaporama actif et je sais comment utiliser les transitions, mais je ne sais pas comment obtenir le CSS et le Javascript pour travailler ensemble pour accomplir cela. Je suis relativement nouveau sur Javascript, donc les réponses simplifiées sont grandement appréciées.

Javascript: 

var images = new Array() images[0] = "img/1.jpg"; images[1] = "img/2.jpg"; images[2] = "img/3.jpg"; images[3] = "img/4.jpg"; images[4] = "img/5.jpg"; var timer = setInterval(checkImage, 3000); var x=0; function checkImage() { if (x>4) { x=0; changeImage(); } else { changeImage(); } } function changeImage() { document.getElementById("slideimg").src=images[x] x++; }

HTML: 

 <img src="img/5.JPG" width="400" height="300" id="slideimg">

Puisque vous demandez le tout, y compris CSS, voici une démonstration de travail (nécessite un navigateur compatible avec CSS3 comme Chrome, Safari ou Firefox 4+): http://jsfiddle.net/jfriend00/cwP5Q/ .

HTML: 

 <div id="container"> <img id="slideimg0" class="slide showMe" src="http://photos.smugmug.com/photos/344287800_YL8Ha-S.jpg"> <img id="slideimg1" class="slide" src="http://photos.smugmug.com/photos/344287888_q22cB-S.jpg"> <img id="slideimg2" class="slide" src="http://photos.smugmug.com/photos/344284440_68L2K-S.jpg"> <img id="slideimg3" class="slide" src="http://photos.smugmug.com/photos/344286315_oyxRy-S.jpg"> <img id="slideimg4" class="slide" src="http://photos.smugmug.com/photos/344285236_hjizX-S.jpg"> </div>

CSS: 

 #container {position: relative; font-size: 0;} .slide { border: none; opacity: 0; position: absolute; top: 0; left: 0; -webkit-transition: opacity 2s linear; -moz-transition: opacity 2s linear; -o-transition: opacity 2s linear; transition: opacity 2s linear; } .showMe {opacity: 1;}

JS (s'exécute lorsque la page est prête): 

 var timer = setInterval(nextImage, 4000); var curImage = 0; var numImages = 5; function nextImage() { var e; // remove showMe class from current image e = document.getElementById("slideimg" + curImage); removeClass(e, "showMe"); // compute next image curImage++; if (curImage > numImages - 1) { curImage = 0; } // add showMe class to next image e = document.getElementById("slideimg" + curImage); addClass(e, "showMe"); } function addClass(elem, name) { var c = elem.className; if (c) c += " "; // if not blank, add a space separator c += name; elem.className = c; } function removeClass(elem, name) { var c = elem.className; elem.className = c.replace(name, "").replace(/ /g, " ").replace(/^ | $/g, ""); // remove name and extra blanks }

Si vous prévoyez faire cela de façon réelle, vous devez utiliser une bibliothèque de classes comme jQuery ou YUI qui facilitera les animations et fonctionnera dans tous les navigateurs, pas seulement les navigateurs compatibles avec CSS3.

Edit: J'ai fait un script plus extensible que celui que j'ai précédemment posté la fonction s () passe au numéro de la diapositive, la variable p est la lecture / pause. Avec cela, vous pouvez facilement faire des boutons pour changer les diapositives. J'ai fait que les images soient dans des liens parce que vous voulez probablement pouvoir cliquer sur les images pour aller quelque part. 

 <style> div{position:relative;width:900px;height:350px;overflow:hidden;margin:0 auto;border:solid 10px #fff;box-shadow:0 0 10px rgba(0,0,0,0.4);background:#fff;margin-bottom:60px;} div>a>img{opacity:0;position:absolute;top:0;left:0;width:900px; -webkit-transition:opacity 1s linear; -moz-transition:opacity 1s linear; -ms-transition:opacity 1s linear; -o-transition:opacity 1s linear; transition:opacity 1s linear} body{text-align:center} </style> <script> var i=0,p=1,q=function(){return document.querySelectorAll("div>a>img")}; function s(e){ for(c=0;c<q().length;c++){q()[c].style.opacity="0";q()[e].style.opacity="1"} } setInterval(function(){ if(p){i=(i>q().length-2)?0:i+1;s(i)} },5000); </script> <a href="javascript:p=1">play</a> <a href="javascript:s(0);i=0;p=0">0</a> <a href="javascript:s(1);i=1;p=0">1</a> <a href="javascript:s(2);i=2;p=0">2</a> <a href="javascript:s(3);i=3;p=0">3</a> <a href="javascript:s(4);i=4;p=0">4</a> <div> <a><img src="Public/shot1.png" style="opacity:1"></a> <a><img src="Public/shot2.png"></a> <a><img src="Public/shot3.png"></a> <a><img src="Public/shot4.png"></a> <a><img src="Public/shot5.png"></a> </div>​