1

我有以下结构：

<div id="container">
<img src="http://webaddress/firstimage.png" alt="1stimage" />
<img src="http://webaddress/secondimage.png" alt="2ndimage" />
<img src="http://webaddress/thirdimage.png" alt="3rdimage" />
</div>

我通过以下 jquery 代码交叉淡入淡出图像：

$('#container img:gt(0)').hide();
setInterval(function(){$('#container :first-child').fadeOut().next('img').fadeIn().end().appendTo('#container');}, 3000);

而CSS是：

#container{
position: relative;
float:left;
margin-top: 7px;
}
#container img{position:absolute;}

但我想交叉淡入淡出 div 而只是图像，因为我可能有这样的简短描述的图像：

<div id="container">
  <div id="1stimg">
   <img src="http://webaddress/firstimage.png" alt="1stimage" />
   <p>This is the first image</p>
  </div>
  <div id="2ndimg">
   <img src="http://webaddress/secondimage.png" alt="2ndimage" />
   <p>This is the second image</p>
  </div>
  <div id="3rdimg">
   <img src="http://webaddress/thirdimage.png" alt="3rdimage" />
   <p>This is the third & last image</p>
  </div>
</div>

我怎样才能做到这一点？任何帮助将不胜感激。提前致谢

4

0 回答 0