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

@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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .

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

Опции темы