在鼠标输入时从数组中加载下一张图像

Question

在页面加载时，var images = 下定义的一组图像中的随机背景图像应用于所有 $("#image").siblings。

在 .mouseenter 上，所选图像淡出，并应用新的背景图像，然后再淡入。我如何确保这始终是数组中的下一张图像，而不是随机图像目前的情况？

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);
    });

Answer 1

这是一个示例代码，我在其中注释了 setTimeout，因为它会产生额外的问题。它可能会在以后完成。主要思想是将自己的图像数组设置为每个图像的 data 属性。然后在 mouseenter 上我们得到了这个数组，我们 shift 它即第一项转到变量 next 然后使用 push 将它添加到最后.接下来的图片设置为background-image。简单有效。

// 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>

在鼠标输入时从数组中加载下一张图像

Load next image from array on mouse enter

html

javascript

arrays

jquery

var