HTML, CSS. Versuchen, zwei Diashows gleichzeitig zu spielen

Ich versuche, zwei Diashows gleichzeitig mit der gleichen Geschwindigkeit zu spielen. Ich habe Slide2 funktioniert, aber meine Slide1 funktioniert überhaupt nicht. Ich habe mich gefragt, wie ich das beheben könnte.HTML, CSS. Versuchen, zwei Diashows gleichzeitig zu spielen

HTML-Code:

<!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-Code:

.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

Quelle

2017-04-09 UnknownDude 007

In dem Verfahren carouse2 Sie Klammern um myindex = 1 anstelle von geschweiften Klammern verwendet, und Sie verwenden die gleiche Variable über beide Funktionen.

Auch in carouse2 hatten Sie eine andere Zeitüberschreitung, bevor die Methode erneut aufgerufen wurde. Ich ersetzte beide durch die gleiche Variable, so dass Sie nur 1 Zahl ändern müssen.

Ich entfernte die div um das Skript-Element, weil das veraltet war und die beiden Blöcke zu einem kombiniert (auf diese Weise der Browser rendert schneller).

Und zuletzt, um sicherzustellen, dass Sie keine Fehler machen, macht carouse2 jetzt die Arbeit für Slide2, und carousel zielt auf Slide1, weil es leichter zu erkennen ist, welche Funktion welche Folie aktiviert.

schrieb ich Ihren Code und dies sollte funktionieren:

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

Lassen Sie mich wissen, ob das funktioniert!

Quelle

2017-04-11 08:07:05

HTML, CSS. Versuchen, zwei Diashows gleichzeitig zu spielen

Antwort

Verwandte Themen