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 个答案: