将上一个和下一个控件添加到旋转木马

Question

在摆弄了计时器和间隔之后，我找到了一个令我满意的解决方案。

请参阅下面的相关jsFiddle或代码：

HTML:

<div id="foo">irrelevant content</div>

javascript(带jQuery(:

var post_array = [ "abc", "123", "xyz" ];
var class_array = [ "red", "blue", "green" ];
var interval = 2000;
var i = 0;
var max = post_array.length;
var id ="#foo";
$(id).html(post_array[0]);
$(id).removeClass().addClass(class_array[0]);
setInterval( function(){
++i;
$(id).fadeOut("slow", function() {
$(id).html(post_array[i%max]).fadeIn("slow");
$(id).removeClass().addClass(class_array[i%max]);
});
}, interval);

现在我想知道添加两个侧箭头的最佳方式是什么，让我可以回去和堡垒

我是否应该在命名函数中编写相关代码，以便在按下按钮时调用它并传递索引参数？(在这种情况下，我如何对同一个索引变量执行操作？(纽扣覆面的最佳做法是什么？

救命！提前感谢

Answer 1

• 旋转木马应该是模块化的、可重用的和可扩展的。当需要在DOM中添加另一个旋转木马时，不要复制粘贴JS代码
• 为了创建PREV/NEXT按钮，您还需要一种方法来停止间隔：stop
• 当您将鼠标悬停在旋转木马上时，需要暂停自动播放以防止出现非常糟糕的用户体验(UX(
• 不要使用jQuery设置动画。只需将一个is-active类分配给当前索引幻灯片即可制作动画，并使用CSS对该类执行任何操作
• 使用变量index(以0开头(跟踪当前幻灯片索引
• 您可能不需要jQuery

目标是使用甜class或正确的prototype语法创建一个类实例，可以像一样使用

const myCarousel = new Carousel({
target: "#carousel-one",
slides: [
{
title: "This is slide one",
image: "images/one.jpg"
},
{
title: "This is slide two! Yey.",
image: "images/two.jpg"
}
]
});

因此，基本上，您需要一个构造函数，它具有以下方法：

方法		描述
anim()	如果超过幻灯片或为负数，则修复索引，并动画化为新索引
prev()	递减索引并触发anim()
next()	增量索引并触发anim()
stop()	清除循环间隔(鼠标输入(
play()	启动循环(每pause毫秒触发next()(