Учебное пособие по нескольким слайдшоу w3schools - дополнительные слайдшоу - PullRequest
Новая
       2

Учебное пособие по нескольким слайдшоу w3schools - дополнительные слайдшоу

1 голос
/ 22 марта 2019

Это JS для страницы, которая имеет несколько элементов. Каждый запускает свое собственное модальное слайд-шоу. Работает на двоих, но когда я пытаюсь добавить третий, это не удается. Логическим первым шагом является: var slideID = ["mySlides1", "mySlides2", "mySlides3]. И аналогичным образом добавьте .mySlides3 в CSS. Но должно быть что-то еще. Возможно, если бы у меня было объяснение того, что делали эти строки: showSlides (1, 0); showSlides (1, 1);

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple

Оригинальный код, который работает с двумя слайд-шоу (w3Schools.com) 

var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["mySlides1", "mySlides2"] 
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1} 
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none"; 
  }
  x[slideIndex[no]-1].style.display = "block"; 
}

1 Ответ

0 голосов
/ 23 марта 2019

Измените свой slideIndex и slideId, чтобы включить участников для третьего слайд-шоу.Затем вызовите showSlides для третьей группы. 

var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

Конечно, это предполагает, что вы дублировали один из слайд-шоу HTML и соответственно изменили идентификаторы.

Кроме того, не забудьте добавитькласс .mySlides3 для CSS вверху страницы. 

.mySlides1, .mySlides2, .mySlides3 {display: none}
...