Javascript 如何使用JS构建幻灯片

我正在努力完成我的第一个网站，我有很短的截止日期，我知道html css和一点JQuery，但正确的JS对我来说仍然很难

我希望在我的网站上有一个幻灯片，这就是为什么我去了w3school，并试图在我的VisualStudio代码中复制这个例子

$（文档）.ready（（）=>{
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“myslides”）；
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
对于（i=0；i
.slideshow容器{
最大宽度：100%；
位置：相对位置；
保证金：自动；
}
迈斯利德斯先生{
显示：无；
}
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
利润上限：-22px；
填充：16px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
用户选择：无；
}
.下一个{
右：0；
边界半径：3px 0 3px；
}
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
.褪色{
-webkit动画持续时间：1.5s；
动画持续时间：1.5s；
}

❮
❯
正如@edinhajdarevic所说，使用数组是一种更好的方法，因为它有许多优点，其中一些优点如下：

使用数组在DOM中呈现幻灯片会使结构动态。动态意味着，每当你想添加一张新幻灯片时，你可以在你的幻灯片数组中添加一个新的
slide
对象，而不是手工编写每张幻灯片的HTML和JavaScript

一旦您定义了所有幻灯片代码，您就可以轻松地保存代码，而不是阅读多行代码，您只需要关心JavaScript代码

不太容易出错，每次复制/粘贴HTML或JavaScript以构建另一张幻灯片时，您都必须根据新幻灯片更改值，有时这会变成一项混乱的工作，导致将来出现错误

在以下W3Schools链接中可以找到一个不错的教程：

您的函数是在
$（文档）的上声明的。准备好了
的回调，因此
onclick
无法访问它们

解决方案1：将声明移到
$（文档）之外。准备好
的回调


var slideIndex=1；
$（文档）.ready（（）=>{
放映幻灯片（幻灯片索引）；
});
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“myslides”）；
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
对于（i=0；i

.slideshow容器{
最大宽度：100%；
位置：相对位置；
保证金：自动；
}
迈斯利德斯先生{
显示：无；
}
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
利润上限：-22px；
填充：16px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
用户选择：无；
}
.下一个{
右：0；
边界半径：3px 0 3px；
}
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
.褪色{
-webkit动画持续时间：1.5s；
动画持续时间：1.5s；
}

❮
❯
控制台中是否有任何错误？另外，您的js在某个时候丢失了
}
，请完成您的代码。你也可以用一些Hi-Barbsan替换你的图片。我已经编辑了我的帖子，现在我已经}）在那里了，只是忘了把它放在这里，谢谢！是的，我有一个控制台错误，上面写着：uncaughtreferenceerror:plusSlides在HtmlanchoreElement中没有定义。单击我不这么认为，我尝试过，但没有成功。所以我认为我的VSCODE没有假设这两个元素是个问题❮                        ❯     在我的程序中，当我执行onclick=“plusSlides（-1）”时，第一个引号显示为黄色，但第二个引号显示为白色，似乎onclick不是完美解决方案人！