Question

基本上我有4个div，它们轮流滑入并延迟滑出然后它回忆起这个功能。像这样：

$(document).ready (function bradslide(){

$("#slide1").delay('1000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide2").delay('9000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide3").delay('17000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide4").delay('25000').slideDown('1000').delay('6000').slideUp('1000', 'swing',      bradslide);
}
);

我要说这很好用，但如果提出建议，我愿意清理它或使其更容易或更符合标准。

然而我的问题是：我如何安排这个，以便最终用户可以操纵动画。这可以单独滑过div，但理想情况下我想要点击几个按钮来向后或向前（我想你明白了）。

非常感谢任何关于如何或从哪里开始的建议。我想我可能不得不废弃这段代码。先谢谢你们。

Answer 1

尽管我有自己的评论，但我确实有一些一般的建议：

查看使用类而不是ID，然后使用jQuery的DOM遍历方法来确定下一个候选滑块是什么。跟踪“currentSlide”然后定位“nextSlide”（可能用.next()标识？）意味着您可以添加任意数量的滑块div（使用类而不是ID，还记得？）并且仍然可以使用它
用户控件（下一个，上一个或选择一个特定的幻灯片）只是中断计时器（可能是一个setTimeout而不是.delay()），然后调用完全相同的功能，将下一个幻灯片放到位
为了使代码更具可重用性和灵活性，您应该使用一些变量。例如，如果您的幻灯片持续时间为1000，那么您将var duration = 1000范围限定到适当的位置（文档就绪函数很好......或滑动函数）然后在函数调用中（无论它是什么）最终看起来像，你会使用.slideDown(duration)。然后，您可以将该值设置为您想要的任何值，并在以后轻松更新。
扩展上述内容，您甚至可以构建一个API，允许您将值传递到自定义滑块函数中：

var bradslide = function(container, delay, duration) {
  // do stuff with a parent container, some delay value, and a duration value
};

bradslide('sliderParent', 6000, 1000);

如何利用我的JQuery编码滑动div的控制？

1 个答案: