Помощь с несколькими автоматическими слайд-шоу – HTML/CSS/JAVA

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

Я также пробовал код для нескольких ползунков в W3schools, но он не работает.

Я просмотрел миллиард других форумов с подобными вопросами, но ни один из них не помог с автоматическим слайд-шоу или просто не сказал, что копирование кода JavaScript и изменение целевого класса CSS может сработать, но это не так.

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

Любая помощь будет принята с благодарностью.

Разделы кода следующие:

HTML:













CSS: /* Контейнер слайд-шоу */ .slideshow-контейнер { максимальная ширина: 320 пикселей; положение: относительное; маржа: авто; }
Javascript: вар слайдИндекс = 0; показатьСлайды(); функция showSlides() { вар я; var слайды = document.getElementsByClassName("mySlides"); for (i = 0; i слайды.style.display = "нет";
}
слайдИндекс++;
если (slideIndex > слайды.длина) {
индекс слайда = 1
}
слайды[slideIndex - 1].style.display = "блок";
setTimeout (showSlides, 2000); // Меняем изображение каждые 2 секунды
}

Несколько предложений: 1) Перестаньте контролировать внешний вид с помощью JavaScript.

Вместо этого выполните замену классов, чтобы таблицу стилей можно было использовать не только для установки состояния отображения, но и, возможно, для создания анимации.

2) Используйте «заскриптованный» класс для первоначального скрытия вместо зацикливания каждого элемента.

3) Пройдите по DOM вместо более медленного подхода nodeList/getElementsBy.

4) Выбросить все бессмысленные DIV и классы впустую.

Слышали ли вы когда-нибудь шутку Джорджа Карлина «не каждое семяизвержение заслуживает названия»? Что ж, не каждый проклятый элемент HTML нуждается в DIV или классах вокруг него. 5) Уберите бессмысленные комментарии. является контейнером слайд-шоу? Кто такой?!? Учитывая то, что у вас есть — или, по крайней мере, то, что вы показываете, нет реальной причины использовать для HTML что-то большее:

 
.slideshowActive {
position:relative;
}

.slideshowActive .slideshow > * {
position:absolute;
left:0;
z-index:1;
opacity:0;
transition:opacity 0s 0.5s;
}

.slideshowActive .slideshow .current {
position:relative;
z-index:2;
opacity:1;
transition:opacity 0.5s;
}

Код (разметка): Отсюда для сценариев я бы поместил все это в IIFE, используя трюк «документ как параметр», чтобы сэкономить на вводе текста.

Сначала ему нужно сообщить CSS, что мы создаем скрипты (таким образом скрипты отключают/блокируют/отключают показ всех изображений), а затем захватывают все слайд-шоу.

Чтобы отслеживать текущий слайд, мы можем использовать/злоупотреблять атрибутом data- самого проигрывателя.

  (function(d) { d.body.classList.add('slideshowActive'); var slideshowInterval = 2000; slideshows = d.getElementsByClassName('slideshow'); for (var i = 0, show; show = slideshows[i]; i++) { show['data-slideshowCurrent'] = show.firstElementChild; show.firstElementChild.classList.add('current'); } function slideUpdate() { for (var i = 0, show; show = slideshows[i]; i++) { var current = show['data-slideshowCurrent']; current.classList.remove('current'); if (!(show['data-slideshowCurrent'] = current.nextElementSibling)) show['data-slideshowCurrent'] = show.firstElementChild; show['data-slideshowCurrent'].classList.add('current'); } } window.addEventListener('load', function() { setInterval(slideUpdate, slideshowInterval); }, false); })(document);

Код (разметка): Обратите внимание: этот сценарий написан только для IE9 и более поздних версий.

Legacy IE будет немного сложнее, но не слишком. Оттуда это простой вопрос CSS:

  <div class="slideshow"> <img src="images/socialcontent/Artboard%201.png" alt="опишите это, ALT НЕ является обязательным" > <img src="images/socialcontent/Artboard%202.png" alt="опишите это, ALT НЕ является обязательным" > <img src="images/socialcontent/Artboard%203.png" alt="опишите это, ALT НЕ является обязательным" > <!-- .slideShow --></div> <div class="slideshow"> <img src="images/socialcontent/1.6_ozhairandbeauty_IG_beautyhack7_1080x1080_V2.png" alt="опишите это, ALT НЕ является обязательным" > <img src="images/socialcontent/13.9_ozhairandbeauty_IG_beautyhack8_1080X1080.png" alt="опишите это, ALT НЕ является обязательным" > <img src="images/socialcontent/10.9_ozhairandbeauty_IG_beautyhack11_1080x1080.png" alt="опишите это, ALT НЕ является обязательным" > <!-- .slideShow --></div> 

Код (разметка): Поскольку у вас есть класс Fade, я предположил, что вам нужны плавные переходы? Пусть CSS сделает всю тяжелую работу.

Апо сдвигает его с экрана, удерживая неактивные из потока, в то время как «текущий» устанавливает размер контейнера. Живая демонстрация здесь:
http://www.cutcodedown.com/for_others/CaitlinPreval/

По сути, DOM — ваш друг, используйте его. Поскольку он написан для «> *» вместо класса или конкретного тега, это будет работать с любым тегом в качестве дочернего элемента слайд-шоу и работать достаточно хорошо, если все они имеют одинаковый размер. Надеюсь это поможет.

Возможно, подойдет что-то вроде ниже? Попробуйте запустить его на своей локальной машине...

 <!DOCTYPE html>


<html lang="en">


<head>


<meta charset="utf-8">


<meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1,0">


<style>


/* Slideshow container */


.slideshow-container{


max-width: 15em;


position: relative;


margin: auto;


}


.mySlides{


background-color: lightblue;


}


</style>


</head>


<body>


<h2>yellow eyed cats</h2>


<!-- Slideshow container -->


<div class="slideshow-container" id="slideshow1">


<!-- Full-width images with number and caption text -->


<div class="mySlides fade">


<img src="[URL='https://lumtu.com/yti/cq55qcGdodHRwOi8vY2F0dGVsbC5uZXQvZGV2b24vQmxhY2tDYXRzL2ZhY2VfODEyNiyED']http://www.cattell.net/devon/BlackCats/face_8126.jpg[/URL]" style="width:100%" alt="слайд 1 изображение 1">


</div>


<div class="mySlides fade">


<img src="[URL='https://lumtu.com/yti/commocGdodHRwOi8vY2F0dGVsbC5uZXQvZGV2b24vQmxhY2tDYXRzL2ZhY2UyMGJ1c3Rlcl8yMDc5LcDM']http://cattell.net/devon/BlackCats/face%20buster_2079.jpg[/URL]" style="width:100%" alt="слайд 1 изображение 2">


</div>


<div class="mySlides fade">


<img src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL3dwY2xpcGFydC5jb20vYW5pbWFscy9jYXRzL2NhdF9waG90b3MvY2F0X2ZhY2Vfc3RyaXBlZF90YWJieV9UL9Ve']https://wpclipart.com/animals/cats/cat_photos/cat_face_striped_tabby_T.png[/URL]" style="width:100%" alt="слайд 1 изображение 3">


</div>


</div>


<h2>blue eyed cats</h2>


<!-- Slideshow container -->


<div class="slideshow-container" id="slideshow2">


<!-- Full-width images with number and caption text -->


<div class="mySlides two fade">


<img src="[URL='https://lumtu.com/yti/commocGdodHRwczovL3VsdGltYXRlcGFwZXJtYWNoZS5jb20vd3AtY29udGVudC91cGxvYWRzLzIwMTIvMDMvY2F0LWZhY2UxLU2Y']https://www.ultimatepapermache.com/wp-content/uploads/2012/03/cat-face1.jpg[/URL]" style="width:100%" alt="слайд 2 изображение 1">


</div>


<div class="mySlides two fade">






<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwczovL3RodW1iOS5zaHV0dGVyc3RvY2suY29tL2Rpc3BsYXlfcGljX3dpdGhfbG9nby8xNjc4OTI3NDIvNTMyODcwNzI2L3N0b2NrLXBob3RvLWNhdC1mYWNlLXBvcnRyYWl0LWluLXN0dWRpby01MzI4NzA3MjYujM3']https://thumb9.shutterstock.com/display_pic_with_logo/167892742/532870726/stock-photo-cat-face-portrait-in-studio-532870726.jpg[/URL]" style="width:100%" alt="слайд 2 изображение 2">


</div>


<div class="mySlides two fade">


<img src="[URL='https://lumtu.com/yti/commocGdodHRwczovL2kucGluaW1nLmNvbS83MzZ4L2ZiL2M0LzBlL2ZiYzQwZTRkMzY3MzVlYjg0Y2Q1Y2IwNGRiMjZiYzcyLczY']https://i.pinimg.com/736x/fb/c4/0e/fbc40e4d36735eb84cd5cb04db26bc72.jpg[/URL]" style="width:100%" alt="слайд 2 изображение 3">


</div>


</div>


<script>


'use strict';


function Make_a_slideshow(id){


var slideIndex = 0,


container = document.getElementById(id);


function showSlides(){


var slides = container.querySelectorAll('.mySlides');


for (var i = 0; i < slides.length; i++){


slides[i].style.display = "none";


}


slideIndex++;


if (slideIndex > slides.length){


slideIndex = 1;


}


slides[slideIndex - 1].style.display = "block";


setTimeout(showSlides, 2000); // Change image every 2 seconds


}


showSlides();


}


//start slideshow 1


Make_a_slideshow('slideshow1');


//delay 1 second before starting slideshow 2


setTimeout(function(){


Make_a_slideshow('slideshow2');


}, 1000);


</script>


</body>


</html>

PHP: