带有容器 div 的图片库答案

【问题标题】：Image Gallery With Container Divs带有容器 div 的图片库
【发布时间】：2023-04-04 19:34:01
【问题描述】：

我正在尝试使用 jquery 构建这样的画廊：

我想在每个容器 div 中使用不同的背景图像，以及在每个 div 中使用不同的图像（img）。

我还希望 div 一个接一个地淡入，并在加载新页面时淡出。

我该如何设置？

【问题讨论】：

@Willing 学习者，你想要一种指导还是真正的代码，如果你愿意，我可以指导你如何做到这一点？？
为 div 定义宽度，并为一行设置四个 div，您可以为此创建一个循环，让背景图像动态来自 for 循环，并在添加背景时使用 jquery animate ..,你应该知道如何让 div 左右浮动和清除..然后你就准备好了。
我正在寻找设置它的代码，因为我真的不知道如何。
我怀疑有人会继续为你写整个画廊。但是，如果您给我们一些您尝试过的东西，我相信人们将能够帮助您。例如。 HTML：所有容器和所有图像的大小都相同吗？
加载新页面时，很难按顺序淡出您的 div，除非您指的是图库中的一页图像而不是整个新网页。

标签： jquery css html gallery

【解决方案1】：

你最好使用 jQuery 并使用fadeIn 和fadeOut 函数。您可以将fadeIn 函数串在一起，以便在一个加载后移动到下一个。

jQuery('#div1').fadeIn('slow', function() {
     jQuery('#div2').fadeIn('slow', function() { 
          //repeat for div3, div4, etc etc..
     }) 
});

另外，对于背景图片，你只需给每个 div 一个 id 并通过 CSS 设置背景图片：

#div1 {
  background-image: url(images/test.jpg);
  width: 100px;
  height: 100px;
  background-repeat: none;
}

对于 div 中的图像，只需使用 HTML 放置它们：

<div id="div1">
    <img src='test.jpg' width='100' height='100' alt="test" />
</div>

【讨论】：

难道没有更动态的方式来使用 jquery 构建它吗？可以说我希望有一个 300 个 div 的网格......我非常怀疑编写 jQuery('#div1').fadeIn('slow', function() { 300 次是否有效。
@WillingLearner 您可以使用 setTimeout 函数并创建一个循环。 codesetTimeout("showDiv()", 5000);变量计数器 = 0; function showDiv() { jQuery('#div'+counter).fadeIn('slow');计数器++； }