Añadir efecto de desvanecimiento en la presentación de diapositivas (Javascript)

He creado una Presentación de diapositivas de JavaScript, pero no sé cómo agregar el efecto de desvanecimiento. Por favor dígame cómo hacerlo, y dígale solo en JavaScript, ¡no jQuery!

Código:

var imgArray = [ 'img/slider1.jpg', 'img/slider2.jpg', 'img/slider3.jpg'], curIndex = 0; imgDuration = 3000; function slideShow() { document.getElementById('slider').src = imgArray[curIndex]; curIndex++; if (curIndex == imgArray.length) { curIndex = 0; } setTimeout("slideShow()", imgDuration); } slideShow(); 

3 Solutions collect form web for “Añadir efecto de desvanecimiento en la presentación de diapositivas (Javascript)”

Mucho más corto que la solución de Ninja y con animation CSS3 acelerada por hardware. http://jsfiddle.net/pdb4kb1a/2/ Solo asegúrese de que el time de transición (1s) sea el mismo que el de la primera function de time de espera (1000 (ms)).

Plain JS

 var imgArray = [ 'http://placehold.it/300x200', 'http://placehold.it/200x100', 'http://placehold.it/400x300'], curIndex = 0; imgDuration = 3000; function slideShow() { document.getElementById('slider').className += "fadeOut"; setTimeout(function() { document.getElementById('slider').src = imgArray[curIndex]; document.getElementById('slider').className = ""; },1000); curIndex++; if (curIndex == imgArray.length) { curIndex = 0; } setTimeout(slideShow, imgDuration); } slideShow(); 

CSS

 #slider { opacity:1; transition: opacity 1s; } #slider.fadeOut { opacity:0; } 

Como alternativa. Si estás tratando de hacer un control deslizante.

El enfoque habitual es animar un marco y animar un marco en.

Esto es lo que hace que el efecto de deslizamiento y el efecto de fundido funcionen. Tu ejemplo se desvanece. Lo cual está bien, pero tal vez no sea lo que realmente quieres una vez que lo veas funcionar.

Si lo que realmente quieres es animar las imágenes y … OUT necesitas algo un poco más complejo.

Para animar las imágenes hacia adentro y hacia afuera, debe usar un elemento de image para cada una, luego voltee una y voltee una. Las imágenes deben colocarse una encima de la otra en el caso de un fundido, si desea deslizarlas, colóquelas uno al lado del otro.

La function de presentación de diapositivas luego funciona la magia, pero antes de que puedas hacer eso, necesitas agregar todas las imágenes de tu matriz a la dom, esto se llama inyección dom dinámica y es realmente genial.

Asegúrate de revisar el violín para ver la demostración completa y el código al que está vinculado en la parte inferior.

HTML

 <div id="slider"> // ...we will dynamically add your images here, we need element for each image </div> 

JS

 var curIndex = 0, imgDuration = 3000, slider = document.getElementById("slider"), slides = slider.childNodes; //get a hook on all child elements, this is live so anything we add will get listed imgArray = [ 'http://placehold.it/300x200', 'http://placehold.it/200x100', 'http://placehold.it/400x300']; // // Dynamically add each image frame into the dom; // function buildSlideShow(arr) { for (i = 0; i < arr.length; i++) { var img = document.createElement('img'); img.src = arr[i]; slider.appendChild(img); } // note the slides reference will now contain the images so we can access them } // // Our slideshow function, we can call this and it flips the image instantly, once it is called it will roll // our images at given interval [imgDuration]; // function slideShow() { function fadeIn(e) { e.className = "fadeIn"; }; function fadeOut(e) { e.className = ""; }; // first we start the existing image fading out; fadeOut(slides[curIndex]); // then we start the next image fading in, making sure if we are at the end we restart! curIndex++; if (curIndex == slides.length) { curIndex = 0; } fadeIn(slides[curIndex]); // now we are done we recall this function with a timer, simple. setTimeout(function () { slideShow(); }, imgDuration); }; // first build the slider, then start it rolling! buildSlideShow(imgArray); slideShow(); 

Fiddle: http://jsfiddle.net/f8d1js04/2/

puedes usar este código

 var fadeEffect=function(){ return{ init:function(id, flag, target){ this.elem = document.getElementById(id); clearInterval(this.elem.si); this.target = target ? target : flag ? 100 : 0; this.flag = flag || -1; this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0; this.elem.si = setInterval(function(){fadeEffect.tween()}, 20); }, tween:function(){ if(this.alpha == this.target){ clearInterval(this.elem.si); }else{ var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag); this.elem.style.opacity = value / 100; this.elem.style.filter = 'alpha(opacity=' + value + ')'; this.alpha = value } } } }(); 

así es como usarlo

 fadeEffect.init('fade', 1, 50) // fade in the "fade" element to 50% transparency fadeEffect.init('fade', 1) // fade out the "fade" element 
  • array.eq () vs. array en Javascript y Jquery
  • Fadeout en la presentación de diapositivas usando javascript
  • Presentación de diapositivas de Javascript con problemas de subtítulos
  • jQuery slideshow loop falla
  • Agregue / añada la label '<script>' a html usando javascript / jquery
  • ¿Cómo build un slider de image jQuery simple con efecto deslizante u opacidad?
  • ¿Es malo no eliminar elementos de HTML que no son visibles?
  • Cómo crear una presentación de diapositivas en html?
  • Añadir funciones de respaldo y reenvío en la presentación de diapositivas
  • jQuery Unslide - Touch no funciona
  • Simple JavaScript / HTML Slideshow
  • Error de reference no capturado: $ no se ha definido el error
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.