我或多或少是一个初学者jquery并开始它 我试图做一个可点击的,循环幻灯片,基于this之一。 目前为止这么好。代码有效(见下文)。 我的问题:简单的循环幻灯片与下一个/ prev链接
是不是有一种更简单的方法来编写代码。我有点为prev和next重复相同的代码。
当我点击下/上一个环节和动画开始 - 和动画过程中我再次点击,则有时图像闪烁或有错误。 有没有办法强制动画完成,然后才对我的点击作出反应。
的Javascript:
$(function() {
$('#prev').click(function() {
var $active = $('#slideshow IMG.active');
var $prev = $active.prev();
$active.addClass('last-active');
if($active.is(":first-child")){$prev = $("IMG:last-child");}
$prev.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
});
$('#next').click(function() {
var $active = $('#slideshow IMG.active');
var $next = $active.next();
$active.addClass('last-active');
if($active.is(":last-child")){$next = $("IMG:first-child");}
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
});
});
CSS:
#slideshow {position:relative; height:350px; opacity:1.0;}
#slideshow IMG {position:absolute; top:0; left:0; z-index:8; opacity:0.0;}
#slideshow IMG.active {z-index:10; opacity:1.0;}
#slideshow IMG.last-active {z-index:9;}
#next {color:#0000ff; cursor:pointer;}
#prev {color:#0000ff; cursor:pointer;}
HTML:
<div id="slideshow">
<img src="image1.jpg" class="active" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
</div>
<div id="next">NEXT</div>
<div id="prev">PREV</div>
非常酷,谢谢! - 我想console.log只是在那里测试,对吧? - 我不明白究竟是什么(0,1)在停止()表示,即使我读http://api.jquery.com/stop/ – Michael 2012-04-23 08:22:47
首先0意味着动画队列不会被清除,所以如果你触发10次动画,动画将执行10次(全长)。因此,如果您快速点击下一个按钮10次,您将不得不等待所有动画结束。第二个'1'是停止正在播放的动画动画(实际完成动画动画)。因此,如果您按下下一个按钮10次,动画的前9次将立即完成,只显示最后一个动画。 .stop(0,1)是解决此重复动画问题的常用方法。 – Cristy 2012-04-23 11:40:44
注意与停止(0,1),即使队列没有被清除没有动画,因为当你点击触发按钮,而动画播放,将完成该动画,只需执行这一项被添加到队列中。 – Cristy 2012-04-23 11:43:58