Кнопка воспроизведения/паузы для полноэкранного фонового слайд-шоу

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

Ваше здоровье!

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
//var $next =  $active.next().length ? $active.next()
    //: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

var $sibs  = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

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

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

person Craig    schedule 31.05.2011    source источник
comment
Java — это не JavaScript; тогда как jQuery является (библиотекой) JavaScript.   -  person David says reinstate Monica    schedule 01.06.2011
comment
хорошо, спасибо, чувак, просто предположил, что Java была короткой!   -  person Craig    schedule 01.06.2011


Ответы (1)


Я бы добавил кнопку в HTML-код #slideshow, добавленный в начале или в конце, не имеет значения (предполагается, что вы начинаете с воспроизведения слайд-шоу)

<a class="pause" href="#">Pause</a>

Затем поместите следующее в свой CSS:

#slideshow {
    position: relative;
}
#slideshow a {
    position: absolute;
    top: ##px;
    left: ##px;
    display: none;
    width: ##px;
    height: ##px;
}
#slideshow:hover a {
    display: block;
}
a.pause {
    background-image: url('/path/to/pause.png');
}
a.play {
    background-image: url('/path/to/play.png');
}

И, наконец, просто используйте следующий javascript и немного его настройте: // ДОБАВЛЕНО var t; //endADDED

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
//var $next =  $active.next().length ? $active.next()
//: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

var $sibs  = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next  = $( $sibs[ rndNum ] );

$active.addClass('last-active');

$next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 0.87}, 1000, function() {
        $active.removeClass('active last-active');
    });
}
//ADDED
//@TODO: this doesn't really account for the possibility that the slideshow wouldn't be playing on page load, it may be better to bind seperate events to .pause and .play, but in general, I think toggle may be more effective.  Another option would be to use click() and just throw in an if statement.
$('#slideshow').find('a').toggle(
    function() {
        $(this).attr('class', 'play');
        t = window.clearInterval(t);
    },
    function() {
        $(this).attr('class', 'pause');
        t = setInterval( "slideSwitch()", 5000 );
    }
);
//endADDED

$(function() {
     t = setInterval( "slideSwitch()", 5000 );
});

Прошу прощения, если это немного быстро написано, я, вероятно, сделал бы несколько вещей немного по-другому, но хотел, чтобы это работало с вашим предыдущим кодом, вместо того, чтобы просто передать вам что-то совершенно другое без объяснения причин. Если хотите, я могу найти сегодня вечером одно из моих слайд-шоу, которое я делал раньше, и связать вас с jsfiddle или его сутью, у меня просто нет времени в данный момент. Если это не сработает, возможно, это как-то связано с (set|clear)Interval махинациями (честно говоря, я всегда просто использовал (set|clear)Timeout(); )

Надеюсь, поможет!

person Kyle    schedule 31.05.2011
comment
Это гениально, спасибо за помощь!! это сработало, но очень странным образом, ха-ха, я вставил код, но у меня есть кнопка перезагрузки, к которой я собирался применить кнопку паузы, но с этой паузой, прикрепленной к слайд-шоу css, я не мог сделай это. Однако, когда я нажимаю кнопку перезагрузки на сайте, он перезагружает страницу и переключает слайд-шоу, что идеально!!! - person Craig; 01.06.2011