多个幻灯片不起作用（javascript）

Question

Introduction 介绍

I have 2 simple slideshows on a single page. 我在一个页面上有2个简单的幻灯片。 Only one works. 只有一件作品。 Please help. 请帮忙。

I did research on how to develop a simple sideshow and it worked at first 我研究了如何开发简单的杂耍，并且起初很有效

But then i added another slideshow and it went out of wacko 但是后来我又添加了一个幻灯片放映

My Code 我的密码

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

What i would like 我想要什么

1)I would like to know how to make both slideshows work on the same page and possibly add more slideshows to the page. 1）我想知道如何使两个幻灯片都在同一页面上工作，并可能在页面上添加更多幻灯片。

2)I hope that the solution i have is a simple change, i don't want to go off-course with the original idea that i had here. 2）我希望我的解决方案是一个简单的更改，我不想偏离我在这里的原始想法。

Answer 1

Here an example with two slide show in the same page. 这是在同一页面中包含两个幻灯片的示例。 In this example the time is 2 second foreach slide and they use the same function. 在此示例中，每个幻灯片的时间为2秒，它们使用相同的功能。 In my code i created img folder and put into folder 3 images (img1.jpg,img2.jpg and img3.jpg). 在我的代码中，我创建了img文件夹，并将3张图像（img1.jpg，img2.jpg和img3.jpg）放入文件夹。 I added tag to underline the first block and second block of slides. 我添加了标记以在幻灯片的第一块和第二块下划线。 You can copy and paste this code to try. 您可以复制并粘贴此代码以进行尝试。 I tryed the code in firfox and chrome and it works. 我尝试了在firfox和chrome中的代码，并且可以正常工作。

before trying the code as it is written, you have to create the folder img and call the images img1.jpg and so on... 在尝试编写代码之前，必须创建文件夹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>

Hope this helps. 希望这可以帮助。

多个幻灯片不起作用（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