简单的jQuery幻灯片,带有fadein/fadeout

Question

我有这个非常简单的jQuery幻灯片:http://jsfiddle.net/6zA4B/

HTML:

<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

JavaScript的:

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

---

它工作得很好,我只想用3个div替换3个img标签(所以我可以在图像下面加一个标题).如何修改脚本来实现呢？我试过这个,但可能我做错了......

HTML:

<div class="fadein">
    <p><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">image1</p>
    <p><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">image2</p>
    <p><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">image3</p>
</div>

JavaScript的:

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

http://jsfiddle.net/S4SmM/1/:d

Answer 1

您的一个选择器稍微偏离:

$('.fadein :first-child')

选择下面是第一个孩子的所有元素.fadein.这包括p元素的第一个子元素,即您尝试旋转的图像.

您希望将:first-child选择器限制在直接位于的元素下.fadein.一种方法是使用子选择器:

$('.fadein > :first-child')

示例: http ://jsfiddle.net/S4SmM/4/