Как сделать что-бы картинки в массиве сменяли друг друга при клике?

@Timyr_filatov · Регистрация: 03.03.2019

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

Нужно сделать так что-бы место картинки накладывалась другая картинка как это сделать? Уже замучился с этим.

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
    <head>
        <title>Практика</title>
        <meta charset="utf-8">
        <link href="stylebib.css" rel="stylesheet">
        <link href="st.css" rel="stylesheet">
        <script src="jsbib.js" defer></script>
    </head>
<body background="img/tor1.jpg">
    <style>
        *{margin: 0; padding: 0;}
        section{ box-shadow: 0 5px 30px rgba(0,0,0,25); width: 60%; height: 600px; margin: 0 auto; background: white;}
        header{width: 96%; height: 20%; margin-left: 2%; margin-right: 2%;}
        header img{width: 100%; height: 65%; display: block;}
        header new{display: block; width: 98%; height: 35%; border-bottom: 2px solid green; margin: 0 auto;}
        header new div{display: block; width: 12%; float: left; font-size: 17px; margin-top: 10px; font-weight: bold;}
        header page{display: block; width: 100%; height: 50px; background: blue;}
        header page img{display: block; width: 100%; height: 100%;}
        center{width: 100%; height: 10%;}
        footer{width: calc(100% - 100px); height: calc(60% - 50px);  border: 1px solid black; border-radius: 10px; margin: 0 auto; margin: 50px;}
        footer #timer{word-wrap: break-word; text-align: center; width: 100%; height: 100%;}
        footer #taimer{word-wrap: break-word; width: 8%; float: left; margin-left: 5px; font-size: 40px;}
        footer #igrok1{width: 40%; height: 100px; float: right;}
        footer #generasia{width: calc(50% - 50px); height: 100px; float: right;}
        #out{font-size: 30px;}
        footer new{display: block; width: 40%; height: 200px; background: #89d381; float: left; border-radius: 50px;}
        #vvod{margin-top: 50px; height: 100px; border-radius: 10px;}
        h3{text-align: center;}
        #otvet{border-radius: 20px;}
        footer page{width: 30%; height: 60%; border: 1px solid black; float: right; border-radius: 20px;}
    </style>
     <section>
           <header>
                <img src="img/golova1.jpg">
                    <new> 
                        <div>Гра</div>
                        <div>Рейтинг</div>
                        <div>Спринт</div>
                        <div>Тематика</div>
                        <div>Дуель</div>
                        <div>Турнір</div>
                        <div>Правила</div>
                        <div></div>
                    </new>
                    <page>
                        <img src="img/golova2.jpg">
                        <img src="img/golova4.jpg">
                        
                    </page>
           </header>
           <center>
           
           </center>
           <footer>
                <div id="taimer">
                    <body onload="init()">
                    <div id="timer">0</div>
                </div>
                <div id="generasia">
                    <div>
                        <p id="out">Случайное слово</p>
                    </div>
                </div>
                <div id="igrok1">
                    <button id = "lol3">Генератор слов</button>
                </div>
                <new>
                    <h3>Введите ответ на вопрос</h3>
                    <input type="text" id="vvod">
                    <input type="button" id="otvet" value="Ответить">
                </new>
                    <page id="picture">
                </page>
           </footer>
     </section>
     
     <script>
           function init()
            {
                sec = 0;
                setInterval(tick, 1000);
            }
            
            function tick()
            {
                sec++;
                document.getElementById("timer").
                    childNodes[0].nodeValue = sec;
                    if (sec == 240){
                        alert("Время вышло");
                        window.open('sort11.html', '_self');
 
                    }                   
}
 
document.getElementById('lol3').onclick = f1;
function f1(){
    var arr = ["жуцыг", "дгргр", "суиш", "гмег","гнл", "гоюъг", "оцн", "нлел", "жугргх","олпср"];
    var rand = Math.floor(Math.random() * arr.length);
    document.getElementById('out').innerHTML = arr[rand];
    
}
 
//массив из картинок
let arr = ['img/grucha.jpg', 'img/banan.jpg', 'img/orex.jpg', 'img/aiva.jpg', 'img/aki.jpg',
'img/alicha.jpg', 'img/lyk.jpg', 'img/kivi.jpg', 'img/granat.jpg', 'img/limon.jpg'];
let pictureContainer = document.getElementById("picture");
let img1 = document.createElement("img");
let img2 = document.createElement("img");
let img3 = document.createElement("img");
let img4 = document.createElement("img");
let img5 = document.createElement("img");
let img6 = document.createElement("img");
let img7 = document.createElement("img");
let img8 = document.createElement("img");
let img9 = document.createElement("img");
let img10 = document.createElement("img");
img1.setAttribute("src", arr[0]);
img2.setAttribute("src", arr[1]);
img3.setAttribute("src", arr[2]);
img4.setAttribute("src", arr[3]);
img5.setAttribute("src", arr[4]);
img6.setAttribute("src", arr[5]);
img7.setAttribute("src", arr[6]);
img8.setAttribute("src", arr[7]);
img9.setAttribute("src", arr[8]);
img10.setAttribute("src", arr[9]);
 
 
 
document.getElementById('otvet').onclick = f2;
function f2(){
        var a1 = document.getElementById('vvod').value;
        switch(a1){
            case 'груша': {alert("Правильно");  pictureContainer.appendChild(img1);}break;
            case 'банан': {alert("Правильно");  pictureContainer.appendChild(img2);}break;
            case 'орех': {alert("Правильно");   pictureContainer.appendChild(img3);}break;
            case 'айва': {alert("Правильно");   pictureContainer.appendChild(img4);}break;
            case 'аки': {alert("Правильно");    pictureContainer.appendChild(img5);}break;
            case 'алыча': {alert("Правильно");  pictureContainer.appendChild(img6);}break;
            case 'лук': {alert("Правильно");    pictureContainer.appendChild(img7);}break;
            case 'киви': {alert("Правильно");   pictureContainer.appendChild(img8);}break;
            case 'гранат': {alert("Правильно"); pictureContainer.appendChild(img9);}break;
            case 'лимон': {alert("Правильно");  pictureContainer.appendChild(img10);}break;
            
            default: {alert("вы проиграли"); window.open('sort11.html', '_self');}
        viewImages();
    }
}
 
     </script>
     
</body>
</html>

@Timyr_filatov · 16.05.2019, 17:55 **[ТС]**

У меня получается картинка становится рядом с другой картинкой а мне нужно что-бы при смене картинок происходила замена старой на новую картинку.

JavaScript
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
//массив из картинок
let arr = ['img/grucha.jpg', 'img/banan.jpg', 'img/orex.jpg', 'img/aiva.jpg', 'img/aki.jpg',
'img/alicha.jpg', 'img/lyk.jpg', 'img/kivi.jpg', 'img/granat.jpg', 'img/limon.jpg'];
let pictureContainer = document.getElementById("picture");
let img1 = document.createElement("img");
let img2 = document.createElement("img");
let img3 = document.createElement("img");
let img4 = document.createElement("img");
let img5 = document.createElement("img");
let img6 = document.createElement("img");
let img7 = document.createElement("img");
let img8 = document.createElement("img");
let img9 = document.createElement("img");
let img10 = document.createElement("img");
img1.setAttribute("src", arr[0]);
img2.setAttribute("src", arr[1]);
img3.setAttribute("src", arr[2]);
img4.setAttribute("src", arr[3]);
img5.setAttribute("src", arr[4]);
img6.setAttribute("src", arr[5]);
img7.setAttribute("src", arr[6]);
img8.setAttribute("src", arr[7]);
img9.setAttribute("src", arr[8]);
img10.setAttribute("src", arr[9]);
 
 
 
document.getElementById('otvet').onclick = f2;
function f2(){
        var a1 = document.getElementById('vvod').value;
        switch(a1){
            case 'груша': {alert("Правильно");  pictureContainer.appendChild(img1);}break;
            case 'банан': {alert("Правильно");  pictureContainer.appendChild(img2);}break;
            case 'орех': {alert("Правильно");   pictureContainer.appendChild(img3);}break;
            case 'айва': {alert("Правильно");   pictureContainer.appendChild(img4);}break;
            case 'аки': {alert("Правильно");    pictureContainer.appendChild(img5);}break;
            case 'алыча': {alert("Правильно");  pictureContainer.appendChild(img6);}break;
            case 'лук': {alert("Правильно");    pictureContainer.appendChild(img7);}break;
            case 'киви': {alert("Правильно");   pictureContainer.appendChild(img8);}break;
            case 'гранат': {alert("Правильно"); pictureContainer.appendChild(img9);}break;
            case 'лимон': {alert("Правильно");  pictureContainer.appendChild(img10);}break;
            
            default: {alert("вы проиграли"); window.open('sort11.html', '_self');}
        
    }
}

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .