Несколько слайд-шоу не работают (JavaScript) - PullRequest
Новая
       20

Несколько слайд-шоу не работают (JavaScript)

0 голосов
/ 08 ноября 2018

Введение

У меня есть 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) Я надеюсь, что решение, которое у меня есть, является простым изменением, я не хочу отклоняться от первоначальной идеи, которая у меня была здесь.

1 Ответ

0 голосов
/ 09 ноября 2018

Вот пример с двумя слайд-шоу на одной странице. В этом примере время каждого слайда составляет 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>

Надеюсь, это поможет.

...