2
var interval;


function mostrarImagenes(){
     imagenes = ['imagen1', 'imagen2', 'imagen3'];
     numeroAleatorio = Math.random();
            numeroMultiplicado = numeroAleatorio*2;
            numeroRedondeado = Math.round(numeroMultiplicado);


            verImagen.innerHTML = '<img src="imagenes/'+imagenes[numeroRedondeado]+'.png">';
  verImagen = document.getElementById('verImagen');
    if (imagenes==0){

                  imagenes = 'imagen1';
            }
            else if(imagenes==1){
                  imagenes = 'imagen2';
            }
            else if(imagenes==2){
                imagenes = 'imagen3';
            }else{
            clearInterval(interval)
            interval = setInterval(mostrarImagenes, 2000);

        }

 }

 mostrarImagenes();
  • Necesito que se roten tres imágenes , y que al llegar a la tercera imagen , se vuelva a comenzar de nuevo desde la primera a la tercera , el clearinterval no me funciono, con este código si rotan pero random
1

2 respuestas 2

0

Lo que he entendido es que quieres rotar las imágenes uno por uno y cuando llegue al último que se repita: (Explicación en los comentarios del código)

let img = '';
let i;
let interval; 
let imagenes = [ 'http://lorempixel.com/400/200/sports/1/', 'http://lorempixel.com/400/200/sports/2/', 'http://lorempixel.com/400/200/sports/3/' ];
let verImagen = document.getElementById( 'verImagen' );

function mostrarImagenes() {
    
    // Contamos si hay aún imagenes
    if ( i < imagenes.length ) {
    
      img = imagenes[ i ];
      console.log( img );
      i++;
    }
    else {
     
      // En caso contrario reseteamos el interval y lo ponemos de nuevo en marcha
      clearInterval(interval);   
      set_interval();
    }
       
   verImagen.innerHTML = '<img src="' + img + '">';    
}

// Función para iniciar y resetear
function set_interval() {
 i = 0; 
 interval = setInterval(function(){ mostrarImagenes() }, 2000);
 console.clear();
 mostrarImagenes(); 
}

// Inicio del programa
set_interval();
<div id="verImagen"></div>

0

Buenas, aquí te muestro una solución completa donde se crean las imágenes y se aplica el efecto fade sobre cada imagen. También he añadido algo de CSS para tener un acabado mas suave.

            var img = (function(win, doc){
                var load = function(arrayImg, destino) {
                    var slide = doc.getElementById(destino);
                    for (img in arrayImg) {
                        var imgHTML = doc.createElement("img");
                        imgHTML.setAttribute("src",arrayImg[img]);
                        imgHTML.classList.add("transicion");
                        slide.appendChild(imgHTML);
                    }
                }
                var init = function(arrayImg, destino, duracionMS) {
                    debugger;
                    var slide = doc.getElementById(destino);
                    var l = arrayImg.length;
                    var pos = 1;
                    var img = doc.querySelectorAll("img");
                    
                    slide.children[0].classList.add("fx-fade");
                    setInterval(function() {
                        for (var cont=0;cont<l;cont++) {
                            img[cont].classList.remove("fx-fade");
                        }
                        img[pos].classList.add("fx-fade");
                        pos++;
                        if (pos==l) {
                            pos=0;
                        }
                    },duracionMS)
                }
                return {
                    animation: function() {
                        load(arguments[0].arrayImagenes, arguments[0].idDestino);
                        init(arguments[0].arrayImagenes, arguments[0].idDestino, arguments[0].duracionTransicionMs);
                    }
                }
            }(window, document));
            
            var arrayImg = [
                "http://www.tecnocio.com/48911-thickbox_default/coche-electrico-bmx-concept.jpg",
                "http://www.tecnocio.com/49689-thickbox_default/coche-electrico-maserati-2x-35w-coches-electricos.jpg",
                "http://www.tecnocio.com/48933-thickbox_default/coche-electrico-para-ninos-mercedes-ml-63-con-motor-2x35w.jpg",
                "http://www.tecnocio.com/48968-thickbox_default/coche-electrico-para-ninos-ford-ranger-coches-electricos-para-ninos.jpg"
            ];
            
            img.animation({
                arrayImagenes: arrayImg,
                idDestino: "slide",
                duracionTransicionMs: 1500
            });
         #slide {
                width: 500px;
                height: 500px;
            }
            #slide > img {
                width: 500px;
                height: auto;
                position: absolute;
                opacity: 0;
            }
            .fx-fade {
                opacity: 1 !important;
            }
            .transicion {
                -webkit-transition: 600ms ease-out;
                -moz-transition: 600ms ease-out;
                -o-transition: 600ms ease-out;
                transition: 600ms ease-out;
            }
<div id="slide"></div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.