为W3School幻灯片编辑JavaScript代码

我想在我的网站上添加一个W3School的幻灯片，问题是我需要不止一个幻灯片，而W3School的JavaScript代码只适用于一个幻灯片

在StackOverflow上搜索答案时，我发现一个用户和我有同样的问题，我们也做了同样的事情，试图使脚本适应我们的需要……显然没有成功

一位用户回答说，他发布了一个经过编辑的脚本，该脚本应该可以用于一个以上的幻灯片，我正试图将该脚本用于我的幻灯片，但由于某些原因，它只能用于一个幻灯片

以下是我所指的答案：

下面是我的幻灯片：

var slideIndex=新数组（2）；
slideIndex[0]=1；
slideIndex[1]=1；
放映幻灯片（1,0）；
放映幻灯片（1,1）；
函数加滑块（n，幻灯片编号）{
slideIndex[slideshownumber]=slideIndex[slideshownumber]+n；
放映幻灯片（幻灯片索引[幻灯片编号]，幻灯片编号）；
}
函数currentSlide（n，slideshownumber）{
slideIndex[SlideshownNumber]=n；
放映幻灯片（幻灯片索引[幻灯片编号]，幻灯片编号）；
}
函数显示幻灯片（n，幻灯片编号）{
var i；
var slideshowname=“slider”+slideshownnumber；
var slides=document.getElementsByName（slideshowname）；
如果（n>幻灯片长度）{
slideIndex[slideshownumber]=1；
}
if（n<1）{
slideIndex[SlideshownNumber]=slides.length；
}
对于（i=0；i

。工具提示{
位置：相对位置；
显示：内联块；
填充：0；
保证金：0；
光标：指针；
颜色：#000000；
}
.工具提示：hover.info，
.工具提示：focus.info{
能见度：可见；
不透明度：1；
变换：translate3d（0,0,0）；
}
.info{
框大小：边框框；
位置：绝对位置；
底部：-980px；
左：95px；
显示：块；
背景：#FFFFFF；
边框：1px实心#000000；
宽度：500px；
字体大小：25px；
线高：24px；
文本对齐：对齐；
光标：文本；
可见性：隐藏；
不透明度：0；
变换：translate3d（0，-20px，0）；
过渡：全部。5秒放松；
}
.信息：以前{
位置：绝对位置；
内容：''；
宽度：100%；
高度：14px；
底部：-14px；
左：0；
}
.信息：之后{
位置：绝对位置；
内容：''；
宽度：10px；
高度：10px；
变换：旋转（45度）；
底部：378px；
右：494px；
左边距：-5px；
背景：#000000；
}
.slideshow容器{
宽度：100%；
高度：300px；
位置：相对位置；
保证金：0；
填充：0；
}
迈斯利德斯先生{
显示：无；
}
.褪色{
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
.slideshow container.imgsl{
位置：相对位置；
宽度：100%；
高度：300px；
}
.slideshow容器.cptn{
背景色：rgba（242,242,242,0.5）；
颜色：#FFFFFF；
字体大小：25px；
填充：8px 0 15px 0；
位置：绝对位置；
底部：0；
宽度：100%；
文本对齐：居中；
}
.prev，
.下一个{
光标：指针；
位置：绝对位置；
顶部：140px；
宽度：自动；
利润上限：-22px；
填充：16px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
}
.下一个{
右：0；
边界半径：3px 0 3px；
}
.prev:悬停，
.下一步：悬停{
背景色：rgba（242,242,242,0.3）；
}
.文本{
显示：块；
填充：14px 17px 35px 17px；
颜色：#8d7200；
}
.更多{
显示：内联；
位置：相对位置；
底部：20px；
左：215px；
保证金：0；
填充：3x10px；
字体系列：“Times New Roman”，无衬线；
文字装饰：无；
颜色：绿色；
字体大小：20px；
字体大小：粗体；
边框：2倍纯绿；
边界半径：5px；
过渡：背景色0.5s，颜色0.5s；
}
.更多：悬停，
.更多：关注{
背景颜色：绿色；
颜色：#FFFFFF；
}

特拉西门诺 南特拉西门诺路 利昂城堡、拉戈城堡 南特拉西门诺帕西尼亚诺博尔贾城堡 南特拉西门诺帕西尼亚诺博尔贾城堡 ，伊尔拉戈迪 皮迪卢科 皮埃科湖 皮埃科湖 皮埃科湖 皮埃科湖

---

您将收到以下错误：

“未捕获引用错误：当前幻灯片不可用。”

因此，

currentSlide（）

正在尝试在定义之前调用它

确保您的JS代码（定义函数currentSlide（n，SlideShownNumber）{}…）在调用之前先执行

另外，调用

plusSlides（）

而不是

plusSlides2（）

以查看Piedulico幻灯片：

<div onclick="void(0);" class="tooltip">Piediluco
    <div class="info">
        <div class="slideshow-container">
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco2.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco3.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco4.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>

            <a class="prev" onclick="plusSlides(-1,1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1,1)">&#10095;</a>
        </div>

        <script> currentSlide(1,1)</script>

        <div class="text">...</div>
            <a class="more" href="#">More</a>
        </div>
    </div>

皮埃科 皮埃科湖 皮埃科湖 皮埃科湖 皮埃科湖 也改变了：

<script> $(document).ready(function(){ currentSlide(1,1) })</script>

$（document）.ready（函数（）{currentSlide（1,1）}）

为什么要复制三个脚本中最差的一个？因为示例中使用的HTML与我的类似，而且我需要学习JavaScript，所以现在我无法判断哪个脚本比其他脚本更好。感谢萨吉布的回答，你能更清楚地解释你想对我说什么吗？你说“确保你的JS代码”是什么意思（定义函数currentSlide（n，SlideshownNumber）{}..在调用之前首先执行。”？好的，您在哪里将JavaScript代码附加到HTML文件？在bodyok底部的外部.js文件中。您可以尝试附加

external.js文件吗