多個幻燈片不起作用（javascript）

Question

介紹

我在一個頁面上有2個簡單的幻燈片。 只有一件作品。 請幫忙。

我研究了如何開發簡單的雜耍，並且起初很有效

但是后來我又添加了一個幻燈片放映

我的密碼

 //slideshow-pokeballs.js var images = ["https://img.rankedboost.com/wp-content/uploads/2016/07/PokeBall.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Great-Ball.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Ultra-Ball.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Master-Ball.png"]; var imageNumber = 0; var imageLength = images.length - 1; function changeBall(x) { imageNumber += x; document.getElementById("pokeballs").src = images[imageNumber]; return false; } //slideshow-pokemon.js var imageNumber = 0; var imageLength = images.length - 1; var images = ["https://vignette.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20140328190757", "https://vignette.wikia.nocookie.net/pokemon/images/7/73/004Charmander.png/revision/latest/scale-to-width-down/200?cb=20140724195345", "https://vignette.wikia.nocookie.net/pokemon/images/3/39/007Squirtle.png/revision/latest/scale-to-width-down/200?cb=20140328191525"]; function changeMon(x) { imageNumber += x; document.getElementById("pokemon").src = images[imageNumber]; return false; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <body> <div> <img src="https://img.rankedboost.com/wp-content/uploads/2016/07/PokeBall.png" id="pokeballs" /> <br> <a href="#" onclick="changeBall(-1); return false;">Previous Slide</a> <a href="#" onclick="changeBall(1); return false;">Next Slide</a> <script src="js/slideshow-pokeballs.js"></script> </div> <br> <div> <img src="https://vignette.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20140328190757" id="pokemon" /> <br> <a href="#" onclick="changeMon(-1); return false;">Previous Slide</a> <a href="#" onclick="changeMon(1); return false;">Next Slide</a> <script src="js/slideshow-pokemon.js"></script> </div> </body>

我想要什么

1）我想知道如何使兩個幻燈片都在同一頁面上工作，並可能在頁面上添加更多幻燈片。

2）我希望我的解決方案是一個簡單的更改，我不想偏離我在這里的原始想法。

Answer 1

這是在同一頁面中包含兩個幻燈片的示例。 在此示例中，每個幻燈片的時間為2秒，它們使用相同的功能。 在我的代碼中，我創建了img文件夾，並將3張圖像（img1.jpg，img2.jpg和img3.jpg）放入文件夾。 我添加了標記以在幻燈片的第一塊和第二塊下划線。 您可以復制並粘貼此代碼以進行嘗試。 我嘗試了在firfox和chrome中的代碼，並且可以正常工作。

在嘗試編寫代碼之前，必須創建文件夾img並調用圖像img1.jpg，依此類推...

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Slides show in the same page -->
<style>
.mySlides1 {display:none;}
.mySlides2 {display:none;}
</style>
<body>
<h2>first block slides</h2>
<div style="max-width:400px">
  <img class="mySlides1" src="img\img1.jpg" style="width:100%">
  <img class="mySlides1" src="img\img2.jpg" style="width:100%">
  <img class="mySlides1" src="img\img3.jpg" style="width:100%">
</div>
<h2>second block slides</h2>
<div style="max-width:400px">
  <img class="mySlides2" src="img\img3.jpg" style="width:100%">
  <img class="mySlides2" src="img\img1.jpg" style="width:100%">
  <img class="mySlides2" src="img\img2.jpg" style="width:100%">
</div>

<script>
var slideIndexX = 0;
var slideIndexY = 0;
carousel();

function carousel() {
    var i;
    var j;
    var x = document.getElementsByClassName("mySlides1");
    var y=document.getElementsByClassName("mySlides2");

    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndexX++;
    if (slideIndexX > x.length) {slideIndexX = 1}
    x[slideIndexX-1].style.display = "block";

    for (j = 0; j < y.length; j++) {
      y[j].style.display = "none";
    }
    slideIndexY++;
    if (slideIndexY > y.length) {slideIndexY = 1}
    y[slideIndexY-1].style.display = "block";

    setTimeout(carousel, 2000);
}
</script>

</body>
</html>

希望這可以幫助。

多個幻燈片不起作用（javascript）

問題描述

1 個解決方案

解決方案1
0 2018-11-09 18:01:14

多個幻燈片不起作用（javascript）

問題描述

1 個解決方案

解決方案1 0 2018-11-09 18:01:14

解決方案1
0 2018-11-09 18:01:14