0

本质上，我有 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，但理想情况下，我希望有几个按钮可以单击以向后或向前（我想你明白了）。

任何关于如何或从哪里开始的建议将不胜感激。我想我可能不得不放弃这段代码。提前谢谢各位。

4

1 回答 1

1

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

  1. 研究使用类而不是 ID，然后使用 jQuery 的 DOM 遍历方法来确定下一个候选滑块是什么。跟踪“currentSlide”然后定位“nextSlide”（用.next()可能标识？）意味着您可以添加任意数量的滑块 div（使用类而不是 ID，记得吗？）并且仍然可以工作。

  2. 用户控件（下一张、上一张或选择特定幻灯片）只需中断计时器（可能是 setTimeout 而不是.delay()），然后调用完全相同的函数将下一张幻灯片放置到位。

  3. 为了使代码更加可重用和灵活，您应该使用一些变量。例如，如果您的幻灯片持续时间为 1000，则您将var duration = 1000范围限定到适当的位置（文档准备功能很好......或滑动功能），然后在您的函数调用中（无论它最终看起来像什么） , 你会使用.slideDown(duration). 然后，您可以将该值设置为您想要的任何值，并在以后轻松更新它。

  4. 扩展上述内容，您甚至可以构建一个 API，允许您将值传递到自定义滑块函数中：

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

bradslide('sliderParent', 6000, 1000);
于 2012-04-25T04:53:02.383 回答