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

Posted 2023-05-08

【中文标题】在鼠标输入时从数组中加载下一个图像

【英文标题】：Load next image from array on mouse enter

【发布时间】：2021-12-15 14:17:53

【问题描述】：

在页面加载时，随机背景图像将应用于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);
    );

【参考方案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);
);

.imagewidth: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>

【讨论】：

谢谢！我已经让代码工作了。但是，我需要所有图像都从同一个图像开始，这是在页面加载时随机选择的。然后，当每个图像悬停在上面时，它会更改为列表中的下一个图像，而与其他图像更改无关。因此，在您的示例中：在页面加载时，所有图像随机以 atom-icon.png 开始，然后当单独悬停时，它们将分别更改为列表中的下一个项目；计算图标.png。等等..希望这是有道理的？

我认为您可以自己制作...它只是更改初始化行$(".image").each(function() $(this).data('own', images).css('background-image': 'url(' + images[0] + ')'); images.push(images.shift()); );。如果您认为此答案不只是浪费时间，您可以投票或/并将其标记为最佳答案。

我已成功将所有图像加载为加载时相同的随机图像。但是我无法弄清楚如何使每个图像的图像变量唯一地移位。我假设它是unshift()。你有机会帮我吗？这是我在这个版本上必须解决的最后一件事！非常感谢