HTML、CSS。 2つのスライドショーを同時に再生しようとしています

同じスピードで同時に2つのスライドショーを再生しようとしています。私はSlide2を使用していますが、Slide1はまったく動作していません。私はこれをどのように修正できるのか疑問に思っています。HTML、CSS。 2つのスライドショーを同時に再生しようとしています

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コード：あなたはmyindex = 1の代わりに、中括弧の周りに括弧を使用して、両方の機能で同じ変数を使用しているcarouse2方法で

.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では、メソッドが再度呼び出される前に、別のタイムアウトが発生しました。私は両方を同じ変数に置き換えたので、1つの番号を変更するだけで済みます。

私はスクリプト要素の周りのdivを削除しました。これは廃止され、2つのブロックが1つに結合されています（そうすることで、ブラウザはより迅速にレンダリングされます）。

最後に、間違いがないように、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。 2つのスライドショーを同時に再生しようとしています

答えて

関連する問題