Удалить слайд jQuery из слайд-шоу после просмотра - PullRequest
1 голос
/ 28 января 2012

Я работаю с несколькими различными слайд-шоу jQuery, и мне пришла идея сделать вводный слайд.Когда посетитель увидит слайд и прочитает его, информация становится бесполезной.Используя в качестве примера jQuery Cycle, как я могу удалить «слайд 1» после того, как посетитель перейдет к «слайду 2».

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

Есть мысли?

Ответы [ 2 ]

2 голосов
/ 28 января 2012

Думаю, этот пост поможет вам.Здесь они рассмотрели пример кода для добавления / удаления слайдов из запуска слайд-шоу в плагине цикла jQuery.

http://forum.jquery.com/topic/jquery-jquery-cycle-remove-slide

0 голосов
/ 28 января 2012

Насколько я знаю, на самом деле нет способа сделать это красиво.Плагин jQuery Cycle инициализируется при вызове со всеми элементами, через которые он будет переключаться.Есть и другие последствия, например, если вы используете пейджер, что происходит с первым после удаления?Я думаю, что вам лучше всего использовать стандартный анимационный эффект jQuery и при его обратном вызове инициировать слайд-шоу.

Итак, вот эти два решения.Во-первых, цикл jQuery, который вызывает сам себя, при обратном вызове разрушает себя и затем перезапускается.

http://jsfiddle.net/RQapW/2/

$('div').cycle({
    timeout: 500,
    after: myFunction
});

function myFunction(currSlideElement, nextSlideElement, options, forwardFlag) {
    console.log(currSlideElement.src + ' : ' + nextSlideElement.src);

    //if we are on the second slide then remove the first one and restart slideshow
    if (currSlideElement == $('img')[0] && nextSlideElement == $('img')[1]) {
        $('div').cycle('destroy');
        $(currSlideElement).remove();
        $('div').cycle({
            timeout: 500,
        });    
    }
}

Просто используйте типичный анимационный эффект jQuery.

http://jsfiddle.net/RQapW/

$('img.first').load( function() {
    $(this).fadeOut(5000, function() {
        $(this).remove();
        $('body').cycle({timeout: 500});
    })
});
...