Переключение картинок между двумя button

Подскажите оптимальный способ : нужно по нажатию на первый button вывести первую картинку, по нажатию на второй button — вывести вторую картинку. Когда выводится одна картинка, — другая скрывается. Пример кода:

 
Push please  
 
Push please  
 div < display: inline-block; width: 400px; text-align: center; >button < font-size: 30px; >.apple

Отслеживать

109k 23 23 золотых знака 111 111 серебряных знаков 372 372 бронзовых знака

задан 9 мая 2018 в 20:55

Rafael Shepard Rafael Shepard

577 2 2 золотых знака 10 10 серебряных знаков 26 26 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

В JS noob, кажется не слишком хорошим решением, но всё же вот:

var first = document.getElementById('btn1'); var second = document.getElementById('btn2'); var watermelon = document.getElementsByClassName('watermelon')[0]; var apple = document.getElementsByClassName('apple')[0]; first.onclick = function() < apple.classList.add("off"); watermelon.classList.remove("off"); watermelon.classList.add("on"); >second.onclick = function()

.box < display: flex; justify-content: center; align-items: center; text-align: center; >button < font-size: 20px; height: 50px; >.on < display: block; >.off

 
Watermelon Apple 
 
    

Что может делать JavaScript?

В этом случае JavaScript изменит атрибут
SRC (источника) изображения.

Turn on the light Turn off the light

Смена картинок HTML/CSS/JS?

Столкнулся с такой проблемой, что не получается сделать переход главного фона на сайте. (всего 3 картинки — «bg.jpg», «bg_1.jpg», «bg_2.jpg»)
Какой нужен код для HTML, CSS, JS в данном случае?

 

  
ГлавнаяНовостиФорумДонатО нас

Личный кабинет 
# 
#
#
Начать играть

.header < padding-top: 20px; width: 100%; background: url(../img/bg.jpg) no-repeat center; background-size: cover; padding-bottom: 100px; min-height: max-content; >header a < color: #2c3e50; >.logo < margin-right: 69px; >.menu < margin: auto; display: flex; padding-top: 20px; padding-bottom: 20px; >.menu li a < text-decoration: none; font-size: 14px; margin-right: 40px; letter-spacing: 0.1em; transition: 0.3s all; >.menu li a:hover < color: #52ce70; box-shadow: 0 2px 0 0 #52ce70; >.index__login < margin-left: auto; >.index__login < display: flex; justify-content: center; align-items: center; width: 180px; height: 45px; background: #52ce70; color: #fff; transition: 0.3s all; box-shadow: 0 5px 35px rgba(0, 0, 0, 0.22); >.index__login:hover

• Вопрос задан более двух лет назад
• 798 просмотров

3 комментария

Средний 3 комментария

Смена картинок по нажатии на кнопку?

Добрый день, подскажите как найти или сделать так, чтобы при нажатии на кнопку менялись картинки (их 3).
Например, пользователь видит 1 картинку прочитал на ней что-то нажал на кнопку и ту 1 картинку заменяет 2 фотография вновь прочитал что-то, нажал на кнопку и 2 фотографию заменяет 3.
из кода ничего особенного

• Вопрос задан более года назад
• 1323 просмотра

Комментировать

Решения вопроса 2

Старт в WordPress

  изображение 1 изображение 2 изображение 3 

document.body.addEventListener('click', e => < if (!e.target.matches('button')) return document.querySelector('.pic img').src = e.target.dataset.src document.querySelectorAll('button').forEach(btn =>btn.classList.remove('active')) e.target.classList.add('active') >)

Ответ написан более года назад

Комментировать

Нравится Комментировать

Middle Front-end Developer (Vue.js/Nuxt.js)

Сначала составляете массив из ваших картинок, туда вставляете пути к ним.
Далее объявляете кнопку и блок с картинкой куда будете вставлять путь
По клику на кнопку вставляете картинку и при каждом клике увеличиваете переменную на 1, если переменная равна или больше кол-во картинок — обнуляете

Ответ написан более года назад

Комментировать

Нравится Комментировать