Javascript HTML，CSS。试图同时播放两个幻灯片_Javascript_Jquery_Html_Css

Javascript HTML，CSS。试图同时播放两个幻灯片

javascript jquery html css

Javascript HTML，CSS。试图同时播放两个幻灯片,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图让两个幻灯片同时播放，彼此以相同的速度播放。我的幻灯片2正在工作，但是，我的幻灯片1根本不工作。我一直在想我怎样才能解决这个问题 HTML代码： <!DOCTYPE HTML> <html lang="en"> <link rel="stylesheet" href="index.css"> <head> <title> Welcome to Sunsplash Festival </title> </style

我试图让两个幻灯片同时播放，彼此以相同的速度播放。我的幻灯片2正在工作，但是，我的幻灯片1根本不工作。我一直在想我怎样才能解决这个问题

HTML代码：

<!DOCTYPE HTML>
<html lang="en">
<link rel="stylesheet" href="index.css">
<head>
<title> Welcome to Sunsplash Festival </title>
</style>
<body>
<audio controls>
<source src="ReadyForWar.mp3" type="audio/mpeg">
</audio>

<div>
<nav>
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="tickets.html">Tickets</a> </li>
<li> <a href="acts.html">Performers</a> </li>
<li> <a href="location.html">Location</a> </li>sitemap.html"
<li> <a href="facilities.html">Facilities</a> </li>
</ul>
</nav>
</div>

<div>
<img class="Slide2" img src="img/b.jpg" alt="Festival Night">
<img class="Slide2" img src="img/c.jpg" alt="Festival Party">
</div>

<div>
<img class="Slide1" img src="img/a.jpg" alt="Festival Girl">
<img class="Slide1" img src="img/MusicPower.jpg" alt="Through The Power Of Music">
</div>

<div>
<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("Slide2");
    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, 1500); 
}
</script>
</div>

<div>
<script>
var myIndex = 0;
carouse2();

function carouse2() {
var i;
var x = document/getElementsByClassName("Slide1");
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(carouse2, 2000);
}
</script>
<div>

<div>
<footer>
<small> Copy: 2017 Sunsplash Festival. All Rights Reserved </small>
<a href="sitemap.html" title="Links to all the pages on this website">Sitemap</a>
</footer>
</div>

</body>
</head>
</html>

在方法

carouse2

中，在

myindex=1

周围使用括号，而不是大括号，并且在两个函数中使用相同的变量

另外，在

carouse2

中，在再次调用该方法之前，您有一个不同的超时。我用相同的变量替换了这两个变量，所以您只需更改1个数字

我删除了script元素周围的div，因为它已经过时，并将两个块合并为一个块（这样浏览器渲染得更快）

最后但并非最不重要的一点是，为了确保您不会犯任何错误，

carouse2

现在正在为Slide2做工作，而

carousel

则针对Slide1，因为更容易识别哪个功能启用哪个幻灯片

我重写了您的代码，这应该可以：

<script>
    var myIndex = 0;
    var speed = 1500;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("Slide");
        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, speed); 
    }

    var mySecondIndex = 0;
    carouse2();

    function carouse2() {
        var j;
        var y = document/getElementsByClassName("Slide2");
        for (j = 0; j < y.length; j++) {
            y[j].style.display = "none";
        }
        mySecondIndex++;
        if (mySecondIndex > y.length) {
            mySecondIndex = 1
        }
        y[mySecondIndex-1].style.display = "block";
        setTimeout(carouse2, speed);
    }
</script>


var-myIndex=0；
var速度=1500；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“幻灯片”）；
对于（i=0；ix.length）{
myIndex=1
}
x[myIndex-1].style.display=“block”；
设置超时（转盘、速度）；
}
var mysecondex=0；
旋转木马2（）；
功能转盘2（）{
var j；
变量y=文档/GetElementsByCassName（“Slide2”）；
对于（j=0；jy.length）{
mySecondIndex=1
}
y[mySecondIndex-1].style.display=“block”；
设置超时（转盘2，速度）；
}

让我知道这是否有效

在方法

carouse2

中，您在

myindex=1

周围使用了括号，而不是大括号，并且在两个函数中使用了相同的变量