Javascript 滑动li元素

我用HTML和CSS创建了一个滑块的外观。现在我需要用JavaScript滑动它

document.getElementById（'next'）.addEventListener（'click'，函数（事件）{
event.preventDefault（）；
//滑动它
})

#幻灯片放映{
位置：相对位置；
溢出：隐藏；
保证金：20px自动0自动；
边界半径：4px；
宽度：500px；
}
#幻灯片放映{
位置：相对位置；
保证金：0自动；
填充：0；
高度：300px；
列表样式：无；
宽度：500px；
溢出：隐藏；
}
#李洪志幻灯片{
位置：相对位置；
显示：块；
浮动：左；
保证金：0；
填充：0；
宽度：500px；
高度：300px；
背景：天蓝色；
文本对齐：居中；
线高：300px；
}

幻灯片1
幻灯片2
幻灯片3
幻灯片4

如果您检查li元素，您可以看到它们以垂直顺序堆叠，因此它们远低于用户所能看到的。它与position:absolute一起工作，参见我的示例

我在所有li元素中添加了一个过渡CSS行。那么只有具有“活动”css类的元素位于正确的位置。所有其他元件向左移动500像素

var currentSlide=“slide1”
var nextSlide=“slide2”
document.getElementById（'next'）。addEventListener（'click'，函数（事件）{
event.preventDefault（）；
//滑动它
var ele=document.getElementById（当前幻灯片）；
removeClass（ele，“活动”）；
ele=document.getElementById（nextSlide）；
addClass（ele，“主动”）；
如果（当前幻灯片==“幻灯片1”）{
currentSlide=nextSlide；
nextSlide=“slide3”；
}else if（当前幻灯片==“幻灯片2”）{
currentSlide=nextSlide；
nextSlide=“slide4”；
}else if（当前幻灯片==“幻灯片3”）{
currentSlide=nextSlide；
nextSlide=“slide1”；
}else if（当前幻灯片==“幻灯片4”）{
currentSlide=nextSlide；
nextSlide=“slide2”；
}
})
/*助手*/
函数addClass（el，类名）{
if（el.classList）
el.classList.add（类名称）
如果（！hasClass（el，className））el.className+=“”+className
}
函数removeClass（el，类名）{
if（el.classList）
el.classList.remove（className）
else if（hasClass（el，className））{
var reg=new RegExp（“（\\s | ^）”+className+”（\\s |$））
el.className=el.className.replace（注册表“”）
}
}

#幻灯片放映{
位置：相对位置；
溢出：隐藏；
保证金：20px自动0自动；
边界半径：4px；
宽度：500px；
}
#幻灯片放映{
位置：相对位置；
保证金：0自动；
填充：0；
高度：300px；
列表样式：无；
宽度：500px；
溢出：隐藏；
}
#李洪志幻灯片{
过渡：1s；
位置：绝对位置；
浮动：左；
显示：块；
保证金：0；
填充：0；
宽度：500px；
高度：300px；
背景：天蓝色；
文本对齐：居中；
线高：300px；
左：-500px；
}
.主动{
左：0px！重要；
}

幻灯片1
幻灯片2
幻灯片3
幻灯片4

可能只是重复一个建议，您可以使用小滑块：Stackoverflow不是免费的代码编写服务。到目前为止，您只有一个单击侦听器。没有人会在这里为您构建这个滑块…这太多了，无法实现expect@charlietfl我没有要求别人帮我做这件事。我只是想知道我该怎么做。这就是为什么我不需要任何插件或jQuery，因为我想学习它。我不需要全部的代码，提示就足够了。这也不是一个“如何”的教程服务。有100种开源的slider脚本，您可以在其中探索代码，也可以在web上阅读大量教程。