jquery - jQuery图片幻灯片仅影响一个DIV

我有这样简单的幻灯片代码：

function anim() {
    $(".images img").first().appendTo('.images').fadeOut(500);
    $(".images img").first().fadeIn(500);
    setTimeout(anim, 5000);
}

这是我的html代码

<div class="subbox-1">
        <div class="caption">
               <div class="caption-text">
                   <h3>COAL MINING</h3>
                      <p>
                           Lorem Ipsum dolor sit amet.
                      </p>
               </div>
         </div>
         <div class="images">
                <img src="images/thumb1.jpg" />
                <img src="images/thumb1-1.jpg" />
                <img src="images/thumb1-2.jpg" />
                <img src="images/thumb1-3.jpg" />
         </div>
</div>

而且我有许多.subbox-1具有不同的图像源。但是我的Jquery代码只在一个.subbox-1图像中起作用，如果我有两个.subbox-1，第二个.subbox-1的图像就不会改变。

请帮助我，谢谢:)

最佳答案

您可以使用jQuery selector context，以便仅对上下文的后代进行搜索。有关此主题的更多讨论，请参见this SO question。

基本上，您的anim函数将采用1个参数：

function anim(selector) {
    ...
}

并且您可以将上下文（通常为this）传递给您的anim函数，如下所示：

$(".subbox-1").each(function() {anim(this)});

编辑：


OP's snippet
Modified