Как сделать, чтобы при нажатии на кнопки менялись картинки?
Oleg2002pr, вот этот код который прислал — работает, но когда добавляю второй блок с такими же кнопками, то уже в первом блоке и во втором блоке кнопки не реагируют на нажатия
а мне надо сделать так чтоб при нажатии разноцветных кружков менялись картинки
Типа Программист @Oleg2002pr
Ок, сейчас попробую сделать.
osimone @osimone Автор вопроса
Oleg2002pr, был бы очень благодарен узнать хотя бы образец как сделать, а дальше буду разбираться, спасибо большое)
Решения вопроса 1
Типа Программист @Oleg2002pr
Концепт на jquery тут Ссылка
Ответ написан более трёх лет назад
osimone @osimone Автор вопроса
спасибо большое, а как сделать так чтоб при нажатие на 1 и ту же кнопку картинка не скрывалась?
Типа Программист @Oleg2002pr
osimone, делается событием if ()
Типа Программист @Oleg2002pr
osimone, или в первом событии на первую кнопку поросло перекрыть второй клик) Если надо будет помощь пишите)
osimone @osimone Автор вопроса
Oleg2002pr, я в js пока полный ноль, можете тут просто написать эту команду if() чтоб я добавил ее к первой кнопке в файле js?)
Замена картинки js по клику, делаем слайдер с нуля, примеры
Слайдер javascript смена картинки пример!? Будем делать слайдер с нуля пошагово, от простого к сложному! И конечно же слайдер будет с использование javascript. На самом деле слайдер это вопрос : Как сменить, заменить картинку в js, как поменять путь до картинки в javascript, примеры замены картинок в реальном времени, примеры, все наша тема!
Слайдер на js без сторонних библиотек с нуля!
- Теория замены картинки в javascript
- Замена картинки по клику
- Простой слайдер на js
- Слайдер с выбором следующей и предыдущей картинки ->Скачать
слайдер на js который сам меняет фото
Теория замены картинки в javascript
Для того, чтобы заменить картинку с помощью javascript — вам потребуется знание теории(хотя бы схематично. ), как это можно сделать!
Для того, чтобы заменить картинку в javascript надо заменить путь в теге картинки
Скрипт замены картинки javascript .
Далее нам нужен способ, с помощью которого, в реальном времени, т.е. при нажатии, — пусть это будет кнопка button произойдет замена содержания тега картинки на другой путь, к новой картинке. Для этого нам потребуется javascript
Как обратиться к тегу картинки для замены.
Чтобы заменить содержание атрибута src — надо, каким-то образом обратиться к тегу — там есть несколько способов сделать это!
У нас заранее есть выбор, поэтому, мы добавим данному тегу, произвольный id, с произвольным значением : change_image
Пример замены пути картинки пример
Как будем менять содержание тега src!?
Сделаем стенд, на котором вживую покажем, как будет меняться картинка вслед за заменой содержимого внутри тега src
Возьмем выше идущий код и прикрепим к нему кнопку, для смены пути картинки, нажмите по кнопке:
Смени содержание тега src
Замена картинки по клику
После того, как вы немного разобрались в теории(или просто прочитали) перейдем к созданию реального примера замены картинки по клику!
Для этого вам понадобится:
Тег img + в атрибут src помещаем адрес первой картинки + id, соберем код картинки:
Кнопка для замены картинки javascript :
Далее, для того, чтобы произошла смена картинки в реальном времени, вам потребуется какой-то элемент, в нашем примере пусть это будет button.
Добавляем в тег onclick.
Используем один из способов обратиться к id, просто пишем «значение» атрибута id(change_image), поcле него точка, атрибут src, равно и в кавычках помещаем путь до второй картинки:
onclick замены картинки по клику» картинки я вывел выше, теперь выведем данный код прямо здесь:
Для смены изображения по клику по кнопке, нажмите Смени картинку javascript Смени картинку javascript
Простой слайдер на js
Сделаем простой слайдер javascript, проще которого просто не существует! Я так думаю.
Нам понадобится переменная, которая будет равна нулю с самого начала!
var theNum = «0»;
Нам понадобится массив с названием картинок, мы уже выше приводили пути до картинок, отличаются лишь названия внутри пути
let arr = [«day», «evening», «morning», «night»];
Напишем самую простую функцию смены картинки по нажатию, в первой строке, напишем условие, в том случае, когда значение переменной theNum будет равна количеству ячеек в массиве, то приравняем эту переменную к нулю!
if(theNum == arr.length)
При каждом нажатии будем отправлять значение ячейки массива([theNum]) в путь картинки:
change_image_1.src=’https://dwweb.ru/__img/php/img_php/’+arr[theNum]+’.png’;
И в самом низу поставим счетчик нажатий, такая запись theNum++; равнозначна theNum = theNum + 1; :
Появление и исчезновение картинки при клике по кнопке на Javascript
От одного из моих подписчиков на YouTube канале поступил достаточно интересный вопрос. Он спросил, как сделать так, чтобы при нажатии на кнопку появлялась картинка в браузере. А при повторном нажатии на кнопку, чтобы эта картинка исчезала.
Этот вопрос показался мне интересным по нескольким причинам. Во-первых – его задал человек, который совершенно не разбирается в программировании, а моя цель именно в том, чтобы помогать таким людям. Во-вторых, ответив на этот вопрос я могу одновременно раскрыть несколько тем по программированию на Javascript.
Алгоритм программы
Первое с чего нужно начинать создание любой программы – это продумать её алгоритм. То есть нужно расписать каждый шаг, который должна будет выполнить наша программа на пути к реализации поставленной задачи. А также, нужно составить алгоритм своих действий при написании программы.
Последовательность создания программы
- Создать HTML документ и поместить на него 2 объекта: картинку и кнопку.
- Создать функцию, которая будет скрывать картинку (или отображать её), если пользователь нажмёт на кнопку.
- Создать событие для кнопки onClick, которое будет вызывать нашу функцию.
Алгоритм работы программы
- Нажатие на кнопку.
- Вызов функции.
- Если картинка в браузере не отображается, то показать её.
- Если картинка видна в браузере, то спрятать её.
Вот так вот приблизительно, для себя, мы набросали что должны сделать и как будем это реализовывать. Теперь можно приступать непосредственно к программированию.
Исчезновение картинки при клике по кнопке
Для начала, сделаем так, чтобы при нажатии на кнопку картинка исчезала.
HTML
JS
function myImg()
В данном примере, при загрузке страницы в браузере, мы выводим на экран картинку Clipboard01. Для этой картинки мы указываем атрибуты id и style. С помощью document.getElementById мы получаем ссылку на элемент по его идентификатору (по ID) и меняем атрибут style на display:none. То есть делаем картинку невидимой (скрываем её отображение в браузере).
Отображение картинки при нажатии на кнопку
Теперь давайте сделаем так, чтобы при нажатии на кнопку, картинка отображалась в браузере.
HTML
JS
function myImg()
В данном примере, мы просто поменяли местами стиль отображения картинки. То есть, изначально при открытии HTML документа картинка у нас не видна (style=»display:none;»), а когда мы нажимаем на кнопку, то происходит замена display:none на display:block и картинка становится видимой.
Появление и исчезновение картинки при нажатии кнопки
Теперь, поняв как всё работает, мы можем объединить первый и второй вариант кода и написать условие, используя операторы If Then Else:
HTML
JS
function myImg() < let elem = document.getElementById('img_1'); // получаем элемент по ID let style = getComputedStyle(elem); // получаем его стили if (style.display === 'none') < document.getElementById('img_1').style.display='block'; >else if (style.display !== 'none') < document.getElementById('img_1').style.display='none'; >>В этом примере, мы изначально делаем картинку невидимой, указав style=»display:none;».
При нажатии на кнопку, мы получаем ссылку на нашу картинку по ID.
Затем, с помощью getComputedStyle получаем объект, содержащий значения всех CSS-свойств элемента (в данном случае нашей картинки).
После этого происходит проверка, если у картинки свойство display равно none (то есть, если картинка не отображается), то мы меняем его на block и тем самым выводим картинку на экран.
Если же свойство display не равно none (то есть картинка видна), то мы меняем его на none и тем самым скрываем изображение.
Обратите внимание на то, что втором условии мы выполнили проверку именно неравенства (указали НЕ равно none), хотя могли написать условие else if (style.display === ‘block’). Этот вариант тоже будет работать, но при условии что для отображения картинки мы всегда будем использовать display:block.
Смена картинок по нажатии на кнопку?
Добрый день, подскажите как найти или сделать так, чтобы при нажатии на кнопку менялись картинки (их 3).
Например, пользователь видит 1 картинку прочитал на ней что-то нажал на кнопку и ту 1 картинку заменяет 2 фотография вновь прочитал что-то, нажал на кнопку и 2 фотографию заменяет 3.
из кода ничего особенного
- Вопрос задан более года назад
- 2282 просмотра
Комментировать
Решения вопроса 2
Старт в WordPress
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, если переменная равна или больше кол-во картинок — обнуляете
Ответ написан более года назад
Комментировать
Нравится Комментировать