jquery - 带有淡入/淡出的简单 jQuery 幻灯片

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 下的元素。一种方法是使用 child selector :

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

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