Al cargar la página, se aplica una imagen de fondo aleatoria a todos los $("#image").siblings de una matriz de imágenes definidas en var images = .
En .mouseenter la imagen seleccionada se desvanece y se aplica una nueva imagen de fondo antes de volver a aparecer. ¿Cómo puedo asegurarme de que esta sea siempre la siguiente imagen de la matriz, en lugar de una imagen aleatoria como es actualmente?
HTML
<section id="grid" class="desktop-image"> <div class="image-grid"> <div id="image" class="image01"></div> <div id="image" class="image02"></div> <div id="image" class="image03"></div> <div id="image" class="image04"></div> </div> </section>JS
// Random Image var images = ['PK1.jpg','PK2.jpg','PK3.jpg','PK4.jpg','PK5.jpg','PK6.jpg','PK7.jpg','PK8.jpg','PK9.jpg','PK10.jpg']; $("#image").siblings().css({'background-image': 'url(assets/' + images[Math.floor(Math.random() * images.length)] + ')'}); //Images Fade Out/In $('.image02').mouseenter(function(){ $(".image02").addClass("hide"); setTimeout(function() { $(".image02").css({'background-image': 'url(assets/' + images[Math.floor(Math.random() * images.length)] + ')'}); },1000); setTimeout(function() { $('.image02').removeClass('hide'); },6000); }); $('.image03').mouseenter(function(){ $(".image03").addClass("hide"); setTimeout(function() { $(".image03").css({'background-image': 'url(assets/' + images[Math.floor(Math.random() * images.length)] + ')'}); },1000); setTimeout(function() { $('.image03').removeClass('hide'); },6000); }); $('.image04').mouseenter(function(){ $(".image04").addClass("hide"); setTimeout(function() { $(".image04").css({'background-image': 'url(assets/' + images[Math.floor(Math.random() * images.length)] + ')'}); },1000); setTimeout(function() { $('.image04').removeClass('hide'); },6000); });Este es un código de muestra en el que he comentado setTimeout , ya que producirá problemas adicionales. Puede que se haga más tarde. La idea principal es establecer su propia matriz de imágenes como atributo de data en cada imagen. Luego, en mouseenter , obtuvimos esta matriz, la cambiamos shift es decir, el primer elemento va a la siguiente variable y luego lo agregamos al final usando push . La imagen a continuación se establece como imagen de fondo . Sencillo y eficaz.
// Random Image var base = 'https://icons.iconarchive.com/icons/goescat/macaron/128/'; var images = [ base+'atom-icon.png', base+'calc-icon.png', base+'burp-suite-icon.png', base+'calligra-krita-icon.png', base+'deluge-icon.png', base+'code-blocks-icon.png' ]; $(".image").each(function() { $(this) .data('own', images) .css({'background-image': 'url(' + images[0] + ')'}); images.push(images.shift()); }); //Images Fade Out/In $('.image').mouseenter(function(){ var $element = $(this); $element.addClass("hide"); // setTimeout(function() { var own = $element.data('own'); var next = own.shift(); own.push(next); $element .css({'background-image': 'url("'+next+'")'}); // },1000); setTimeout(function() { $element.removeClass('hide'); },6000); }); .image{width:128px;height:128px;padding:0px;margin:10px;border:1px solid #000; float:left} .hide {} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section id="grid" class="desktop-image"> <div class="image-grid"> <div id="image1" class="image"></div> <div id="image2" class="image"></div> <div id="image3" class="image"></div> <div id="image4" class="image"></div> </div> </section>