Как скрыть предыдущий слайд в простом слайд-шоу jQuery? - PullRequest
Новая
       20

Как скрыть предыдущий слайд в простом слайд-шоу jQuery?

1 голос
/ 28 мая 2019

Я создаю онлайн-портфолио для моей подруги и для этого простое слайд-шоу изображений с плавными переходами.Я хочу иметь возможность "скрыть" предыдущий "последний активный" слайд, когда отображается новый "активный" слайд.

Я изменил показанное здесь слайд-шоу (http://jonraasch.com/blog/a-simple-jquery-slideshow),, поэтомувместо автоматического цикла он управляется кнопками «предыдущий / следующий». Все это прекрасно работает. В отличие от приведенного выше примера, мне нужно иметь изображения разного размера в слайд-шоу.

Проблема: способслайд-шоу работает, как стопка изображений, я вижу предыдущее изображение позади текущего «активного». Например, при переключении между вертикальным (портретным) изображением и горизонтальным (пейзажным) изображением, я могу видеть пейзажное изображение позадипортрет один.

Я пробовал метод jQuery .hide () в функции $ nextSlide (), но не уверен, что это правильный способ сделать это. Я полный новичок в javascript и jQuery.

HTML: 

<div id="slideshow">
    <div class="active">
        <img src="horizontal.jpg">
    </div>

    <div>
        <img src="vertical.jpg">
    </div>

</div>

<div id="controls">
<span class="control-prev">prev</span> / <span class="control-next">next</span>
</div>

CSS: 

#slideshow {
    position:relative;
    height:400px;
}

#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 400px;
    background-color: white;
}

#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:9;
}

#slideshow DIV IMG {
    height: 350px;
    display: block;
    border: 0;
    margin-bottom: 10px;
}

JavaScript: 

function nextSlide() {
    var $active = $('#slideshow DIV.active'); 
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last'); 


    var $next =  $active.next().length ? $active.next() 
        : $('#slideshow DIV:first');


    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 300, function() {
            $active.removeClass('active last-active');
        });
}
$(".control-next").click(function(){
    nextSlide();
    });

´´´

The goal is to have a slideshow that doesn't show the images like a stack. I bet the solution is very simple, but I can't work it out.

1 Ответ

0 голосов
/ 28 мая 2019

После удаления активных и последних активных классов из вашего div ... сбросьте их непрозрачность обратно на 0.0, чтобы в следующий раз он снова анимировался (постепенно появлялся): 

function nextSlide() {
    var $active = $('#slideshow DIV.active'); 
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last'); 


    var $next =  $active.next().length ? $active.next() 
        : $('#slideshow DIV:first');


    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 300, function() {
            $active.css({opacity: 0.0})
                   .removeClass('active last-active');
        });
}

Если вы тоже этого хотитечтобы постепенно затухать, а не переходить к непрозрачности 0 ... используйте следующее: 

$next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 300, function() {
                $active.css({opacity: 1.0})
                       .animate({opacity: 0.0}, 300, function(){
                          $active.removeClass('active last-active')
                       });
            });
...