Problem with jQuery cycle plugin
I am using the jQuery cycle pluging, and having some trouble after i added a play/pause option.
The code looks like this;
$('#img').cycle({
fx: 'fade',
speed: 'slow',
timeout: 1000,
pager: '.imagegallerypager.r2s1',
pagerClick: function (zeroBasedSlideIndex, slideElement) {
$('#txt').cycle({
startingSlide: zeroBasedSlideIndex
});
$('#txt').cycle('pause');
$('#img').cycle('pause');
}
});
$('#txt').cycle({
fx: 'none',
speed: 'slow',
timeout: 1000
});
$('#playpause, .imagegallerypager a').click(function () {
开发者_高级运维if ($('#playpause').attr('class') == 'pause') {
$('#txt').cycle('pause');
$('#img').cycle('pause');
$('#playpause').html('<img src="images/icon_play.gif" alt="Play" title="Play" />');
$('#playpause').removeClass('pause');
$('#playpause').addClass('play');
}
else if ($(this).attr('class') == 'play') {
$('#txt').cycle('resume');
$('#img').cycle('resume');
$('#playpause').html('<img src="images/icon_pause.gif" alt="Pause" title="Pause" />');
$('#playpause').removeClass('play');
$('#playpause').addClass('pause');
}
});
The script runs fine until i press the pause button and then the play button to start the action again. The img runs fine, but the txt seems to have the settings reset (ie fx effet, timeout effect etc) resulting in the img and txt being ofset and no longer following each other. I have tried many different things, but so far no luck.
Any suggestions?
Seems to work perfectly fine here, although I've had to amend your code to use .hasClass() because checking the 'class' attribute isn't reliable (jQuery leaves spaces in the class name).
Here's the code I tried using:
<!doctype html>
<html>
<head>
<title>JQuery Cycle Plugin - Example Slideshow</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
speed: 'slow',
timeout: 1000,
pager: '.imagegallerypager.r2s1',
pagerClick: function (zeroBasedSlideIndex, slideElement) {
$('#txt').cycle({
startingSlide: zeroBasedSlideIndex
});
$('#txt').cycle('pause');
$('#img').cycle('pause');
}
});
$('#txt').cycle({
fx: 'none',
speed: 'slow',
timeout: 1000
});
$('#playpause').click(function () {
console.log('test');
if ($('#playpause').hasClass('pause')) {
$('#txt').cycle('pause');
$('#img').cycle('pause');
$('#playpause').html('play');
$('#playpause').removeClass('pause');
$('#playpause').addClass('play');
}
else if ($(this).hasClass('play')) {
$('#txt').cycle('resume');
$('#img').cycle('resume');
$('#playpause').html('pause');
$('#playpause').removeClass('play');
$('#playpause').addClass('pause');
}
});
});
</script>
</head>
<body>
<div class="slideshow" id="img">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>
<div id="txt">
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
<span>five</span>
</div>
<a href="#" id="playpause" class="pause">pause</a>
</body>
</html>
加载中,请稍侯......
精彩评论