如何在javascript中制作简单的图像滑块

我正在尝试制作简单的图像滑块

• img标签中的图像不是背景图像
• 所有图像都有显示：无仅第一个li有活动类活动类为显示：块
• 单击按钮将活动类仅添加到下一个li，并从预li中删除活动类
• 我试过了，但它在点击按钮上添加了所有下一个li标记

var btn_next=document.getElementById（'next-btn'）；
btn_next.onclick=函数（）{
if（$（'main_chagen li'）.hasClass（'acitve'）==true）{
$（'#main_chagen li.acitve'）.removeClass（'acitve'））
$（'main_chagen li'）.next（）.addClass（'acitve'）；
}否则{
}
}

.main\u chagen{
宽度：100%；
浮动：左；
位置：相对位置；
}
#梅因查根酒店{
宽度：100%；
身高：26雷姆；
对象匹配：覆盖；
}
#下一个btn，
#预btn{
位置：绝对位置；
顶部：15雷姆；
填充：5px20px；
}
#下一个btn{
右：0；
}
#预btn{
左：0；
}
#李泽根大街{
显示：无；
}
.img_acitve{
显示：块！重要；
}

下一个
之前

以下是一个工作示例

你需要研究一下

$（函数（）{
$（“按钮”）。在（“单击”，函数（）上）{
var$cur=$（'#main_chagen li.active'）；//可能处于活动状态
var max=$（'#main_chagen li'）.length；//LIs的最大数量
var dir=this.id.indexOf（“next”）==0？1:-1；//哪个按钮
var idx=$cur.length==0？0:$cur.index（）+dir；//找到要显示的内容的索引
如果（idx>=max）idx=0；//我们是在结束还是开始
如果（idx<0）idx=max-1；
$（'main_chagen li'）.removeClass（“活动”）.eq（idx）.addClass（“活动”）；
})
$（“#下一个btn”）。单击（）；//显示第一个
});
.main\u chagen{
宽度：100%；
浮动：左；
位置：相对位置；
}
#梅因查根酒店{
宽度：100%；
身高：26雷姆；
对象匹配：覆盖；
}
#下一个btn，
#预btn{
位置：绝对位置；
顶部：15雷姆；
填充：5px20px；
}
#下一个btn{
右：0；
}
#预btn{
左：0；
}
#李泽根大街{
显示：无；
}
李：很活跃{
显示：块！重要；
}













下一个
之前
我添加了jQuery。现在从placeholder.com添加一些图像为什么不一直使用jQuery<代码>$（“#下一个btn”）。在（“单击”上，function（）{/code>sir我使用了$（“#下一个btn”）。但问题是，活动类添加了所有下一个li标记，我只需要在单击时添加下一个li标记。如果您喜欢，请与答案交互