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()现在正在进入锚链接而不是之前的图像，尽管我可能错了。

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

感谢您的帮助！阿米特

Answer 1

尝试用作相对选择器<a>标记：它可能有帮助

jQuery('#slideshowImages a:first').addClass('active');
的jQuery（'＃slideshowImages   一个：最后 '）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');
}); });

（修改）jQuery幻灯片无法正常工作

1 个答案: