Как сделать рандом картинок при перезагрузке странице?

@Masterwen · Регистрация: 01.04.2020

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

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

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<title>Смена картинок</title>
<script language="javascript">
var i=0;
var imgs=new Array('0.png','1.png', '2.png','0.png','1.png', '2.png'); //         Добавте свои картинки через запятую
function imgsrc(){
var image2=document.getElementById("image2");
image2.src=imgs[++i];
 
}
</script>
</head>
<body>
<img id="image2" src="0.png" onClick="imgsrc();">
</body>
</html>

@amr-now · 21.02.2021, 08:50

Здравствуйте.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Смена картинок</title>
</head>
<body>
    <img id="image2">
    <script>
        let imgs = ['0.png', '1.png', '2.png', '3.png', '4.png', '5.png']; //   Добавьте свои картинки через запятую
        let i = Math.floor(Math.random() * imgs.length);
        let image2 = document.getElementById("image2");
        imgsrc(); // Первоначальное заполнение картинки
        image2.onclick = imgsrc;
        function imgsrc() {
            image2.src = imgs[i]; // Увеличить индекс лучше потом
            if (++i === imgs.length) i = 0;
        }
    </script>
</body>
</html>

@Masterwen · 22.02.2021, 08:51 **[ТС]**

Огромное спасибо Вам. А могли бы вы подсказать как в этом коде сделать вывод нескольких картинок (а то я продублировал код а показывается только 1 картинка) и как сделать рандом не с перезагрузкой страницы а через отдельную кнопку? спасибо.

@amr-now · 22.02.2021, 11:18

Сообщение от Masterwen

как сделать рандом не с перезагрузкой страницы а через отдельную кнопку?

При загрузке картинки все первые.

Сообщение от Masterwen

я продублировал код а показывается только 1 картинка

Тогда индекс надо держать свой для каждой картинки. Один из способов - зашить индекс в HTML.

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Смена картинок</title>
</head>
<body>
    <div class="block">
        <img class="image" data-index="0" src="0.png"> <input type="button" value="Случайный выбор">
    </div>
    <div class="block">
        <img class="image" data-index="0" src="0.png"> <input type="button" value="Случайный выбор">
    </div>
    <div class="block">
        <img class="image" data-index="0" src="0.png"> <input type="button" value="Случайный выбор">
    </div>
    <script>
        let imgs = ['0.png', '1.png', '2.png', '3.png', '4.png', '5.png']; //         Добавте свои картинки через запятую
 
        for (let img of document.querySelectorAll(".block>.image")) {
            img.onclick = imgsrc; // Обработчик картинки
            // Если картинка непосредственно перед кнопкой
            img.nextElementSibling.onclick = btn_click; // Обработчик кнопки
        }
 
        function btn_click() {
            let i = Math.floor(Math.random() * imgs.length);
            let image = this.previousElementSibling; // Если картинка непосредственно перед кнопкой
            image.dataset.index = i;
            image.src = imgs[i];
        }
 
        function imgsrc() {
            let i = +this.dataset.index;
            if (++i === imgs.length) i = 0;
            this.src = imgs[i]; 
            this.dataset.index = i;
        }
    </script>
</body>
</html>

@Masterwen · 22.02.2021, 14:29 **[ТС]**

amr-now, Супер! А можно сделать чтобы кнопка перезагрузки только была одна на все картинки или же все как есть но тогда с перезагрузкой страницы. Чтобы также было несколько картинок но менялись рандомно одной кнопкой Спасибо!!!

@amr-now · 22.02.2021, 14:48

Сообщение от Masterwen

А можно сделать чтобы кнопка перезагрузки только была одна на все картинки

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Смена картинок</title>
</head>
<body>
    <div class="block">
        <img class="image" data-index="0" src="0.png">
        <img class="image" data-index="0" src="0.png">
        <img class="image" data-index="0" src="0.png">
    </div>
    <input type="button" class="random" value="Случайный выбор">
    <script>
        let imgs = ['0.png', '1.png', '2.png', '3.png', '4.png', '5.png']; //         Добавте свои картинки через запятую
 
        for (let img of document.querySelectorAll(".image")) {
            img.onclick = imgsrc; // Обработчик картинки
        }
        document.querySelector(".random").onclick = btn_click; // Обработчик кнопки
 
        function btn_click() {
            for (let img of document.querySelectorAll(".image")) {
                let i = Math.floor(Math.random() * imgs.length);
                img.dataset.index = i;
                img.src = imgs[i];
            }
        }
 
        function imgsrc() {
            let i = +this.dataset.index;
            if (++i === imgs.length) i = 0;
            this.src = imgs[i];
            this.dataset.index = i;
        }
    </script>
</body>
</html>

@Masterwen · 22.02.2021, 16:37 **[ТС]**

amr-now, Спасибо Вам большое! с меня шоколадка

@Masterwen · 23.02.2021, 18:28 **[ТС]**

amr-now, С праздником! у меня сова вопрос а как к этому коду добавить еще рандомный вывод текста, тоже нескольких слов как и картинок чтобы с кнопки выводились рандомно. Подскажи пожалуйста.

@amr-now · 23.02.2021, 18:39

Masterwen, к конкретной картинке привязана конкретная фраза? Или фразы выбираются хаотически из общего списка?

Добавлено через 2 минуты
Тоже поздравляю с Днём Советской армии и Военно-морского флота!

@Masterwen · 23.02.2021, 19:14 **[ТС]**

amr-now, Нет не к картинке. Просто три списка слов с рандомным выводом одной кнопкой. получается что и картинки и текс будут выводись рандомно при нажатии кнопки

@amr-now · 25.02.2021, 07:51

Сообщение от Masterwen

Просто три списка слов с рандомным выводом одной кнопкой. получается что и картинки и текс будут выводись рандомно при нажатии кнопки

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Смена картинок</title>
</head>
<body>
    <div class="block">
        <div>
            <img class="image" data-index="0" src="0.png">
            <div>Первый</div>
        </div>
        <div>
            <img class="image" data-index="0" src="0.png">
            <div>Первый2</div>
        </div>
        <div>
            <img class="image" data-index="0" src="0.png">
            <div>Первый3</div>
        </div>
    </div>
    <input type="button" class="random" value="Случайный выбор">
    <script>
        let imgs = ['0.png', '1.png', '2.png', '3.png', '4.png', '5.png']; //         Добавте свои картинки через запятую
        let titles = [
            ["Первый", "Второй", "Третий"],
            ["Первый2", "Второй2", "Третий2", "Четвертый2", "Пятый2"],
            ["Первый3", "Второй3"]
        ];
        let imgElements = document.querySelectorAll(".image");
        for (let img of imgElements) {
            img.onclick = imgsrc; // Обработчик картинки
        }
        document.querySelector(".random").onclick = btn_click; // Обработчик кнопки
 
        function btn_click() {
            for (let i = 0; i < imgElements.length; i++) {
                let img = imgElements[i];
                // Выбор случайной картинки из общего списка imgs
                let imgsIndex = Math.floor(Math.random() * imgs.length);
                img.dataset.index = imgsIndex;
                img.src = imgs[imgsIndex];
                // Выбор случайного текста из отдельного списка для каждой картинки
                let titlesIndex = Math.floor(Math.random() * titles[i].length);
                img.nextElementSibling.textContent = titles[i][titlesIndex];
            }
        }
 
        function imgsrc() {
            let i = +this.dataset.index;
            if (++i === imgs.length) i = 0;
            this.src = imgs[i];
            this.dataset.index = i;
        }
    </script>
</body>
</html>

Тут как раз тот самый случай, когда при переборе массива элементов <img> пригодился бы метод массива forEach(), у которого уникальная возможность одновременно вытаскивать и текущий элемент массива, и текущий индекс массива.
А поскольку городить огород с практически устаревшим методом неохота, то можно обойтись старым добрым циклом for по числовому индексу, а элемент массива вытаскивать отдельно: let img = imgElements[i];

И второе мелкое наблюдение - в одной функции появились три похожих переменных индекса.
Чтобы их различить, требуются длинные имена переменных.
Но практика показывает, что название переменной длиннее трех букв становится практически нечитаемым )))))

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. 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-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Masterwen 0 / 0 / 0 Регистрация: 01.04.2020 Сообщений: 6
	22.02.2021, 08:51 [ТС]
	Огромное спасибо Вам. А могли бы вы подсказать как в этом коде сделать вывод нескольких картинок (а то я продублировал код а показывается только 1 картинка) и как сделать рандом не с перезагрузкой страницы а через отдельную кнопку? спасибо. 0

@Masterwen 0 / 0 / 0 Регистрация: 01.04.2020 Сообщений: 6
	22.02.2021, 14:29 [ТС]
	amr-now, Супер! А можно сделать чтобы кнопка перезагрузки только была одна на все картинки или же все как есть но тогда с перезагрузкой страницы. Чтобы также было несколько картинок но менялись рандомно одной кнопкой Спасибо!!! 0

@Masterwen 0 / 0 / 0 Регистрация: 01.04.2020 Сообщений: 6
	22.02.2021, 16:37 [ТС]
	amr-now, Спасибо Вам большое! с меня шоколадка 0

@Masterwen 0 / 0 / 0 Регистрация: 01.04.2020 Сообщений: 6
	23.02.2021, 18:28 [ТС]
	amr-now, С праздником! у меня сова вопрос а как к этому коду добавить еще рандомный вывод текста, тоже нескольких слов как и картинок чтобы с кнопки выводились рандомно. Подскажи пожалуйста. 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	23.02.2021, 18:39
	Masterwen, к конкретной картинке привязана конкретная фраза? Или фразы выбираются хаотически из общего списка? Добавлено через 2 минуты Тоже поздравляю с Днём Советской армии и Военно-морского флота! 0

@Masterwen 0 / 0 / 0 Регистрация: 01.04.2020 Сообщений: 6
	23.02.2021, 19:14 [ТС]
	amr-now, Нет не к картинке. Просто три списка слов с рандомным выводом одной кнопкой. получается что и картинки и текс будут выводись рандомно при нажатии кнопки 0

Как сделать рандом картинок при перезагрузке странице?

Решение