jQuery 滚动幻灯片
Posted
技术标签:
【中文标题】jQuery 滚动幻灯片【英文标题】:jQuery Scrolling SlideShow 【发布时间】:2012-04-24 04:12:19 【问题描述】:我目前正在从头开始创建滚动幻灯片,但遇到了问题。
当我多次按下下一张按钮时,幻灯片开始一起运行,如何确保下一张幻灯片等到当前幻灯片停止后再开始下一张。
var scrollAmount=910
var image0Left=-scrollAmount;
var image1Left=0;
var image2Left=scrollAmount;
var scrollSpeed0=2000;
var scrollSpeed1=2000;
var scrollSpeed2=2000;
$(document).ready(function()
$("#left-arrow").click(showPreviousSlide);
$("#right-arrow").click(showNextSlide);
);
function showPreviousSlide()
image0Left+=scrollAmount;
if(image0Left > scrollAmount)
image0Left=-scrollAmount;
scrollSpeed0=0;
image1Left+=scrollAmount;
if(image1Left > scrollAmount)
image1Left=-scrollAmount;
scrollSpeed1=0;
image2Left+=scrollAmount;
if(image2Left > scrollAmount)
image2Left=-scrollAmount;
scrollSpeed2=0;
$("#slide0").animate(left: image0Left, scrollSpeed0);
scrollSpeed0=2000;
$("#slide1").animate(left: image1Left, scrollSpeed1);
scrollSpeed1=2000;
$("#slide2").animate(left: image2Left, scrollSpeed2);
scrollSpeed2=2000;
function showNextSlide()
image0Left-=scrollAmount;
if(image0Left < -scrollAmount)
image0Left=scrollAmount;
scrollSpeed0=0;
image1Left-=scrollAmount;
if(image1Left < -scrollAmount)
image1Left=scrollAmount;
scrollSpeed1=0;
image2Left-=scrollAmount;
if(image2Left < -scrollAmount)
image2Left=scrollAmount;
scrollSpeed2=0;
$("#slide0").animate(left: image0Left, scrollSpeed0);
scrollSpeed0=2000;
$("#slide1").animate(left: image1Left, scrollSpeed1);
scrollSpeed1=2000;
$("#slide2").animate(left: image2Left, scrollSpeed2);
scrollSpeed2=2000;
这就是所有的控制脚本代码。这是指向实际站点的链接。 Site
每次调用 showPreviousSlide 或 showNextSlide 时都会移动三个图像幻灯片。如何确保 showPreviousSlide/showNextSlide 函数的一次迭代在再次调用之前完成移动我的幻灯片?我删除了我的幻灯片 div overfill:hidden,以便更容易看到我的幻灯片上发生了什么。
感谢您的帮助。
摩根
【问题讨论】:
【参考方案1】:您可以像这样将完成回调传递给.animate()
:
animationCompleted = false;
$("#slide0").animate(left: image0Left, scrollSpeed0, function()
animationCompleted = true;
);
然后在你的函数中检查animationCompleted
的值:
function showPreviousSlide()
if (!animationCompleted) return;
// ...
查看docs 了解更多信息和示例。
【讨论】:
以上是关于jQuery 滚动幻灯片的主要内容,如果未能解决你的问题,请参考以下文章