Aggiunta di dissolvenza a diapositiva semplice con Javascript

Ho un codice molto semplice che sto usando per eseguire una piccola presentazione di immagini e desidero aggiungere un effetto di dissolvenza quando cambiano. Non sono in grado di utilizzare css o jquery e non riesco a trovare qualcosa che non coinvolge questi due.

<script type="text/javascript"> <!-- var image1=new Image() image1.src="image1.jpg" var image2=new Image() image2.src="image2.jpg" var image3=new Image() image3.src="image3.jpg" //--> </script> <img src="image1.jpg" name="slide" width="300" height="269" /> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) document.images.slide.src=eval("image1.src") document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",3000) } slideit() //--> </script> 

Certamente, c'è più di un modo per farlo, ma ho tamburato un violino per ya qui:

JSFIDDLE

Mentre questo codice potrebbe utilizzare qualche pulizia, ho scelto di avvicinarmi al problema come questo:

 var aImageURLs = [ "http://fc00.deviantart.net/fs71/f/2012/329/5/0/wonderland___landscape_calendar__2_by_ivanandreevich-d4u0odw.jpg", "http://www.wallanu.com/wp-content/uploads/2014/03/landscape-3-hd-wallpapers.jpg", "http://davidpaulboaz.org/slides/Capitol%20Reef%20Landscape.jpg" ]; var aImageObjects = []; // build out objects for (var i = 0; i < aImageURLs.length; i++) { var o = new Image(); o.src = aImageURLs[i]; aImageObjects[i] = o; } var slideImage = document.images.slide; slideImage.currentSlide = 0; function slideIt(iSlideFrequency) { function nextSlide() { // identify next slide slideImage.currentSlide++; slideImage.currentSlide = (slideImage.currentSlide % aImageObjects.length); // transition old slide out setOpacity(slideImage, 0); fadeOut(slideImage, 1000, function() { // transition new slide in slideImage.src = aImageObjects[slideImage.currentSlide].src; fadeIn(slideImage, 1000, function() { setTimeout(nextSlide, iSlideFrequency); }); }); } setTimeout(nextSlide, iSlideFrequency); } function fadeIn(oImg, iMillis, callback) { var iTicks = 100; var iWait = iMillis > iTicks ? Math.floor(iMillis/iTicks) : 0; var iTick = 0; var FadeMeIn = function(){ var fOpacity = iTick/iTicks; setOpacity(oImg, fOpacity); iTick++; if (iTick <= iTicks) { setTimeout(FadeMeIn, iWait); } else { try { callback(); } catch(Err) {} } } FadeMeIn(); } function fadeOut(oImg, iMillis, callback) { var iTicks = 100; var iWait = iMillis > iTicks ? Math.floor(iMillis/iTicks) : 0; var iTick = 100; var FadeMeOut = function(){ var fOpacity = iTick/iTicks; setOpacity(oImg, fOpacity); iTick--; if (iTick >= 0) { setTimeout(FadeMeOut, iWait); } else { try { callback(); } catch(Err) {} } } FadeMeOut(); } function setOpacity(oImg, fValue) { // assume "real browser" values (decimals) oImg.style.opacity = fValue; // adjust for IE var iValue = Math.ceil(fValue*100); oImg.style.filter = "alpha(opacity=" + iValue + ")"; } slideIt(3000); 

Utilizzando il codice corrente, una dissolvenza non functionrà perché perde la sua altezza e il riferimento quando si passa alla src. È meglio eliminare effettivamente gli elementi img, quindi passare gli zIndex e animare l'opacità delle diapositive correnti / successive.

Ho usato un codice tratto da questa altra domanda qui su SO: Matematica: Facilità, facilità di fuori di uno spostamento usando la curva Hermite con vincolo di tempo

Da allora ho minificato le 5 funzioni di interpolazione dell'animation ed è certamente less facile da leggere.

Ecco un approccio che funziona bene – assicuratevi di aggiornare le fonti di image per riflettere le immagini valide.

Fondamentalmente, chiamiamo una function che svanirà l'elemento di destinazione in 500ms, usando 50 passi. Una volta fatto questo, cambiamo la sorgente dell'image e la sbiaderemo nuovamente. Una volta fatto questo, abbiamo impostato un timeout di 3 secondi prima di ricominciare da capo.

 <!DOCTYPE html> <html> <head> <script> ///////////////////////////////////////////////////////////////////////////////////////////function cubicHermite(a,b,d,e,c){var g=a*a,f=g*a;return(2*f-3*g+1)*b+(f-2*g+a)*e+(-2*f+3*g)*d+(fg)*c} function interp(a,b,d,e,c){var g,f;f=e/(a/2+b+d/2);g=f*a/2;f*=b;return result=c<=a?cubicHermite(c/a,0,g,0,f/b*a):c<=a+b?g+f*(ca)/b:cubicHermite((cab)/d,g+f,e,f/b*d,0)} function linear(a){return a} function cubic(a){return interp(0.35,0.3,0.35,1,a)} function doAnim(a,b,d,e){var c=a/b;setTimeout(function(){doAnimStep(0,b,c,d,e)},c)} function doAnimStep(a,b,d,e,c){a<=b?(setTimeout(function(){doAnimStep(a,b,d,e,c)},d),e(a/b),a++):void 0!=c&&null!=c&&c()} ///////////////////////////////////////////////////////////////////////////////////////////function animFadeIn(elem, callback) { doAnim(250,20,function(raw){elem.style.opacity=cubic(raw)},callback); } function animFadeOut(elem, callback) { doAnim(500,50,function(raw){elem.style.opacity=1-cubic(raw)},callback); } /////////////////////////////////////////////////////////////////////////////////////////// window.addEventListener('load', onDocLoaded, false); function onDocLoaded() { slideChange(); } var imgNames = ["img/girl.png", "img/redbaron.png"]; var imgNum = 0; function slideChange() { animFadeOut(document.images.slide, afterSlideFadedOut); function afterSlideFadedOut() { document.images.slide.src = imgNames[imgNum]; imgNum++; if (imgNum > imgNames.length-1) imgNum=0; animFadeIn(document.images.slide, afterSlideFadedIn); } function afterSlideFadedIn() { setTimeout(slideChange, 3000); } } </script> </head> <body> <img name="slide" width="300" height="269" /> </body> </html>