(изменено) слайд-шоу jQuery не работает - PullRequest
Новая
       2

(изменено) слайд-шоу jQuery не работает

1 голос
/ 31 мая 2011

У меня есть код слайд-шоу 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. Сайт не на английском языке, хотя я не думаю, что это должно на что-либо повлиять.

Спасибо за вашу помощь! Amit

1 Ответ

1 голос
/ 31 мая 2011

попробуйте использовать в качестве относительного селектора <a> тег: это может помочь 

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');
}); });
...