Как я могу иметь несколько слайд-шоу на разных вкладках одной и той же страницы - PullRequest
Новая
       6

Как я могу иметь несколько слайд-шоу на разных вкладках одной и той же страницы

0 голосов
/ 15 июня 2019

Мне нужно несколько слайд-шоу, но все они на разных вкладках на одной странице.

Честно говоря, я не эксперт, но я пытаюсь понять, как повторить слайд-шоу с кнопками, работающими для каждогоone.

Если я добавлю этот полный скрипт в HTML со всеми CSS-классами ".mySlides" в верхней части страницы, он покажет все слайд-шоу на одной странице, и все они будут работать нормально,но они нужны мне отдельно.

<script>
var slideIndex = [1,1,1,1,1,1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4",  
"mySlides5", "mySlides6", "mySlides7", "mySlides8"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);
showSlides(1, 4);
showSlides(1, 5);
showSlides(1, 6);
showSlides(1, 7);

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";  
}
</script>

Так что я дублирую HTML слайд-шоу и соответственно меняю идентификаторы.

В каждом окне я добавляю класс ".mySlides" в CSS вверху страницы и добавляютолько тот, который я использую в этом окне.

.mySlides3 {display: none}

Вместо того, чтобы оставлять все: 

.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6,  
.mySlides7, .mySlides8 {display: none}

В каждом слайд-шоу я также изменяю значение «prev» «следующего» класса в соответствии с используемым слайд-шоу. 

  <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 2)">&#10095;</a>
</div>

Это сценарий отдельных слайд-шоу, но когда я повторяю его в другом окне, он показывает разные слайд-шоу с разными изображениями, но стрелки всех из них не работают.

Я стирал значения slideIndex, slideId и showSlides, оставляя только те, которые предшествуют слайд-шоу, которое я использую, для «mySlides3» я оставляю это так: 

<script>
var slideIndex = [1,1,1];
var slideId = ["mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

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";  
}
</script>

1 Ответ

...