Я бы добавил кнопку в 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