javascript - (修改)jQuery 幻灯片不工作

Question

我有一个 jQuery 幻灯片代码，可以很好地处理以下 HTML 结构:

<div id="slideshow">
    <div id="slideshowImages">
        <img src="image1.jpg" alt="" />
        <img src="image2.jpg" alt="" />
    </div>

    <div id="slideshowNav">
        <span id="slideshowLeft"><a href="#"><img src="images/slideshowLeft.png" alt="&gt;" /></a></span>
        <span id="slideshowRight"><a href="#"><img src="images/slideshowRight.png" alt="&lt;" /></a></span>
    </div><!-- /#slideshowNav -->
</div><!-- /#slideshow -->

虽然现在我想修改它以便它可以使用相同的结构，但图像现在不是纯图像，而是链接。也就是说，幻灯片标记的“内容”现在是:

<a href="#"><img src="image1.jpg" alt="" /></a>
<a href="#"><img src="image2.jpg" alt="" /></a>

使幻灯片正常工作的 jQuery 代码有点冗长，所以我想我只发布必要的内容。它的工作原理是:

jQuery('#slideshowImages img:first').addClass('active');
jQuery('#slideshowImages img:last').addClass('lastImg');

var $active = jQuery('#slideshowImages img.active');

var $previous = $active.prev().length ? $active.prev(): jQuery('#slideshowImages img.lastImg');

    $active.animate({opacity:0.0}, 300, function() {
        //when done animating out, animate next in
        $previous.css({opacity:0.0})
            .animate({opacity: 1.0}, 400, function() {
            $active.removeClass('active');
            $previous.addClass('active');
    });
});

如果我 console.log() $active 和 $previous，我总是得到同样的结果。有什么方法可以使 $previous 变量实际上像以前一样成为上一张图像？我认为 .prev() 现在正在让它转到 anchor 链接而不是以前的图像，尽管我可能是错的。

要查看此代码的实时版本，可以在 http://engineercreativity.com/samples/daf 查看。 .该网站不是英文的，但我认为这不会影响任何内容。

感谢您的帮助!阿米特

Answer 1

尝试用作相对选择器<a> tag: 可能有帮助

jQuery('#slideshowImages a:first').addClass('active');

jQuery('#slideshowImages a:last').addClass('lastImg');

var $active = jQuery('#slideshowImages a.active');

var $previous = $active.prev().length ? $active.prev(): jQuery('#slideshowImages a.lastImg');

$active.animate({opacity:0.0}, 300, function() {
    //when done animating out, animate next in
    $previous.css({opacity:0.0})
        .animate({opacity: 1.0}, 400, function() {
        $active.removeClass('active');
        $previous.addClass('active');
}); });