Question

目标：创建一个显示6个幻灯片的HTML页面，以显示在大型显示器上。每个幻灯片将使用相同批次的图像，因为它将在陈列室中展示产品和产品信息。这仅供内部使用，将被加载并保持循环，因此如果加载时间稍慢，则不是世界末日。

我做了什么：我为页面创建了基本布局，并从W3学校找到了一些基本的JavaScript来创建幻灯片。 W3 Schools的代码仅适用于每页一次幻灯片放映。为了解决这个问题，我找到了多篇帖子，建议复制脚本并创建一个用于每个脚本的新类。

问题：当我复制脚本时，只有其中一个幻灯片正常工作。我可以看到的另一个问题是页面的代码与相同脚本的6个副本失控，并且必须在幻灯片显示的每个位置包含每个图像。

我需要帮助的位置：是否有更简洁的方法来处理JavaScript以运行许多幻灯片？我不熟悉JavaScript，但我认为有一个很好的方法来处理它，因此不需要6个相同的脚本副本。

其他信息：如果有更好的解决方案，任何人都看到我不反对放弃HTML页面选项。我目前的代码如下所示。如果有任何我遗漏的信息或需要任何澄清，请告诉我。

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
    .mySlides1 {display:none;}
    .mySlides2 {display:none;}
</style>

<body>

<!--Top Row-->
<div class="w3-cell-row">
    <div class="w3-yellow w3-cell w3-third">
        <img class="mySlides1" src="img1.jpg" style="width:100%">
        <img class="mySlides1" src="img2.jpg" style="width:100%">
        <img class="mySlides1" src="img3.jpg" style="width:100%">
    </div>
    <div class="w3-green w3-cell w3-third">
        <p>Top Center</p>
    </div>
    <div class="w3-blue w3-cell w3-third">
        <p>Top Right Corner</p>
    </div> 
</div>

<!--Bottom Row-->
<div class="w3-cell-row">
    <div class="w3-red w3-cell w3-third">
        <p>Bottom Left Corner</p>
    </div>
    <div class="w3-purple w3-cell w3-third">
        <img class="mySlides2" src="img4.jpg" style="width:100%">
        <img class="mySlides2" src="img5.jpg" style="width:100%">
        <img class="mySlides2" src="img6.jpg" style="width:100%">
    </div>
    <div class="w3-amber w3-cell w3-third">
        <p>Bottom Right Corner</p>
    </div>
</div>

<!--Script for first slideshow-->
<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides1");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
<!--Script for second slideshow-->
<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides2");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>

</body>
</html>

更新：感谢您的反馈。使用@helb的反馈我能够修改JavaScript以在同一页面上运行多个幻灯片。我已发布更新的JavaScript以供参考。

function carousel(className, slideStart) {
    var i;
    var myIndex = slideStart;
    var x = document.getElementsByClassName(className);
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 5000, className, myIndex); // Change image every 2 seconds
}

carousel("show1", 0);
carousel("show2", 3);

Answer 1

是的，只需将类名作为函数的参数：

function carousel(className) {
    var i;
    var x = document.getElementsByClassName(className);
    // …
}

carousel("mySlides1");
carousel("mySlides2");

在JS中定义函数：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions

如果你只是想要一个旋转木马＆＃34;没有学习创建自己的东西，使用现成的。 @Kamelkent推荐的OwlCarousel2看起来不错。我个人最喜欢的是Siema。

HTML页面显示多个幻灯片

1 个答案: