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

【问题标题】：Multiple Slideshows not working (javascript)多个幻灯片不起作用（javascript）
【发布时间】：2018-11-10 02:01:14
【问题描述】：

简介

我在一个页面上有 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）我希望我的解决方案是一个简单的改变，我不想偏离我原来的想法。

【问题讨论】：

如果我理解您的问题，请阅读此链接：w3schools.com/howto/howto_js_slideshow.asp如何创建幻灯片和这篇文章...stackoverflow.com/questions/11479234/…希望这会有所帮助
谢谢@Ferdinando，第一个链接可能正是我要找的。我找到了这个线程stackoverflow.com/questions/41541559/… - 试图应用这个代码

标签： javascript function slideshow getelementbyid

【解决方案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>

希望这会有所帮助。

【讨论】：

欢迎您...对于其他用户...如果您投票赞成答案...谢谢