Скрипт слайдер работает только с одним блоком изображений

@NickNNick · Регистрация: 04.02.2020

Студворк — интернет-сервис помощи студентам

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

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<head>
<script type="text/javascript">
  var total_pics_num = 2; // колличество изображений
  var interval = 5000;    // задержка между изображениями
  var time_out = 1;       // задержка смены изображений
  var i = 0;
  var timeout;
  var opacity = 100;
  function fade_to_next() {
    opacity--;
    var k = i + 1;
    var image_now = 'image_' + i;
    if (i == total_pics_num) k = 1;
    var image_next = 'image_' + k;
    document.getElementById(image_now).style.opacity = opacity/100;
    document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
    document.getElementById(image_next).style.opacity = (100-opacity)/100;
    document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
    timeout = setTimeout("fade_to_next()",time_out);
    if (opacity==1) {
      opacity = 100;
      clearTimeout(timeout);
    }
  }
  setInterval (
    function() {
      i++;
      if (i > total_pics_num) i=1;
      fade_to_next();
    }, interval
  );
</script>
</head>
 
<body>
 
// первый блок изображений (работает)
<div>
  <img src="https://www.cyberforum.ru/images/portfolio/1.jpg" id="image_1" style="position: absolute;" />
  <img src="https://www.cyberforum.ru/images/portfolio/2.jpg" id="image_2"style="opacity: 0; filter: alpha(opacity=0);" />
  </div>
 
// второй блок изображений (либо не работет, либо работает с переходом от первого блока, если меняем количество изображений в скрипте и порядковые номера image)
<div>
  <img src="https://www.cyberforum.ru/images/portfolio/3.jpg" id="image_1" style="position: absolute;" />
  <img src="https://www.cyberforum.ru/images/portfolio/4.jpg" id="image_2" style="opacity: 0; filter: alpha(opacity=0);" />
  </div>
</body>

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

@fixeri · 05.02.2020, 13:35

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .wrapper_images { height: 200px; }
        .wrapper_images img { opacity: 0; filter: alpha(opacity = 0); position: absolute; }
        .wrapper_images img:first-child { opacity: 1; }
    </style>
</head>
<body>
    <div class="wrapper_images">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=1" alt="1">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=2" alt="2">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=3" alt="3">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=4" alt="4">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=5" alt="5">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=6" alt="6">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=7" alt="6">
    </div>
 
    <div class="wrapper_images">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=8" alt="1">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=9" alt="2">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=10" alt="3">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=11" alt="4">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=12" alt="5">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=13" alt="6">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=14" alt="6">
    </div>
 
    <div class="wrapper_images">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=15" alt="1">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=16" alt="2">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=17" alt="3">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=18" alt="4">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=19" alt="5">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=20" alt="6">
        <img src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=21" alt="6">
    </div>
 
    <script type="text/javascript">
        "use strict";
 
        document.querySelectorAll(".wrapper_images").forEach(startAnimation);
 
        function startAnimation(wrapper) {
            let interval = 5000;    // задержка между изображениями
            let time_out = 1;       // задержка смены изображений
            let timeout;
            let opacity = 100;
 
            let image = wrapper.querySelector("img:last-child");
 
            setInterval (function() {
                image = image.nextElementSibling ? image.nextElementSibling : wrapper.querySelector("img");
                fade_to_next();
            }, interval);
 
            function fade_to_next() {
                opacity--;
                image.style.opacity = opacity / 100;
                image.style.filter = 'alpha(opacity=' + opacity + ')';
                let next = image.nextElementSibling ? image.nextElementSibling : wrapper.querySelector("img");
                next.style.opacity = (100 - opacity) / 100;
                next.style.filter = 'alpha(opacity=' + (100 - opacity) + ')';
 
                timeout = setTimeout(fade_to_next, time_out);
                if (opacity == 1) {
                    opacity = 100;
                    clearTimeout(timeout);
                }
            }
        }
    </script>
</body>
</html>

@NickNNick · 05.02.2020, 13:44 **[ТС]**

Спасибо большое! Попробую.

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

@NickNNick 0 / 0 / 0 Регистрация: 04.02.2020 Сообщений: 2
	05.02.2020, 13:44 [ТС]
	Спасибо большое! Попробую. 0