Javascript 显示多个幻灯片的HTML页面_Javascript_Html_Css

Javascript 显示多个幻灯片的HTML页面

javascript html css

Javascript 显示多个幻灯片的HTML页面,javascript,html,css,Javascript,Html,Css,目标：创建一个HTML页面，在大屏幕上显示6个幻灯片。每个幻灯片将使用同一批图像，因为它将在展厅中展示产品和产品信息。这是仅供内部使用，将被加载，只是保持循环，所以如果加载时间有点慢，它不是世界末日我所做的：我创建了页面的基本布局，并从W3学校找到了一些基本JavaScript来创建幻灯片。W3学校的代码只针对每页的单个幻灯片设计。为了解决这个问题，我找到了多篇建议复制脚本并为每个脚本创建一个新类的帖子问题：当我复制脚本时，只有一个幻灯片正常工作。我可以看到的另一个问题是，页面代码失控，有6

目标：创建一个HTML页面，在大屏幕上显示6个幻灯片。每个幻灯片将使用同一批图像，因为它将在展厅中展示产品和产品信息。这是仅供内部使用，将被加载，只是保持循环，所以如果加载时间有点慢，它不是世界末日

我所做的：我创建了页面的基本布局，并从W3学校找到了一些基本JavaScript来创建幻灯片。W3学校的代码只针对每页的单个幻灯片设计。为了解决这个问题，我找到了多篇建议复制脚本并为每个脚本创建一个新类的帖子

问题：当我复制脚本时，只有一个幻灯片正常工作。我可以看到的另一个问题是，页面代码失控，有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>


.mySlides1{display:none；}
.mySlides2{display:none；}
上中锋
右上角
左下角
右下角
var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides1”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
setTimeout（carousel，2000）；//每2秒更改一次图像
}
var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides2”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
setTimeout（carousel，2000）；//每2秒更改一次图像
}

更新：感谢您的反馈。使用@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);

功能旋转木马（类名，slideStart）{
var i；
var myIndex=slideStart；
var x=document.getElementsByClassName（className）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
setTimeout（carousel，5000，className，myIndex）；//每2秒更改一次图像
}
旋转木马（“show1”，0）；
旋转木马（“show2”，3）；

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

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

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

在JS中定义函数：

如果你只是“想要一个旋转木马”，而没有学习创建自己的东西，那么就使用现成的旋转木马。@Kamelkent推荐的猫头鹰转盘2看起来不错。我个人最喜欢的是。

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

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

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

在JS中定义函数：

有几个旋转木马库，您可以使用它们来代替自己编写。看看（我最喜欢的）。如果你仍然想自己做这件事来学习，你仍然可以看看他们是如何做的。有几个旋转木马库你可以使用，而不是自己写。看看（我最喜欢的）。如果你仍然想自己学习，你仍然可以看看他们是如何做到的。