HTML，CSS。試圖讓兩個幻燈片同時播放

我試圖讓兩個幻燈片同時播放以相同的速度進行。我有Slide2工作，但是，我的Slide1根本不工作。我一直在想如何解決這個問題。HTML，CSS。試圖讓兩個幻燈片同時播放

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

來源

2017-04-09 UnknownDude 007

在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>

讓我知道這是否正常工作！

來源

2017-04-11 08:07:05

HTML，CSS。試圖讓兩個幻燈片同時播放

回答

相關問題