带有容器 Div 的图片库

Question

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

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

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

我该如何设置呢？

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