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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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