图像库与容器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>