Question

我正试图让两张幻灯片以相同的速度同时播放。我有Slide2工作，但是，我的Slide1根本不工作。我一直想知道如何解决这个问题。

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>

CSS代码：

.Slide1{
    height: 741px;
    width: 1406px;
}

.Slide2{
    height: 741px;
    width: 1406px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0; 
overflow: hidden;
background-color: #000000;
}

li {
    float: left;
}

li a {
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #D3D3D3;
}

body {
    background-color: #90EE90;
    ]

    enter code here

Answer 1

在方法carouse2中，您使用myindex = 1周围的括号而不是花括号，并且您在两个函数中使用相同的变量。

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

我删除了脚本元素周围的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>

让我知道这是否有效！

HTML，CSS。试图让两张幻灯片同时播放

1 个答案: