Задать вопрос
alexkomp
@alexkomp
Простота — залог надежности.
javascript

Как сделать, чтобы при нажатии на блок выполнялась функция, где из этого блока берётся фон и передаётся в другой блок на JS?

Как сделать, чтобы при нажатии на блок выполнялась функция, где из этого блока берётся фон и передаётся в другой блок на JS?

Или, как сделать вот такой слайдер?
5d3341c314300693328737.png
  • Вопрос задан
  • 465 просмотров
Комментировать
Подписаться 3 Средний Комментировать
Решения вопроса 2
@vladdimir
Верстальщик
Алгоритм
1. Вешаем обработчик на галерею addEventListener('click', onClickGallery)
2. пишем функцию onClickGallery.
Что она должна делать?
- Если клик по превью, то изменить адрес большого изображения. И добавить индикатор текущего изображения у превью (синяя точка под последней прьвюшкой).
- Если клик по стрелке, то показать следующее/предыдущее изображение.
- Если клик по активному изображению или в другом месте, выйти из функции.

Дал бы готовый код, но мне лень, а вам надеюсь хочется сделать и самому)

Еще можно оптимизировать, чтобы в превью стояли картинки маленького разрешения, а в большую ставить полномасштабные варианты. Это ускорит загрузку сайта)
Ответ написан
4 комментария
4 комментария
erge
@erge
Примус починяю
1) Поиск в яндекс: галерея слайдер на javascript - множество готовых решений.

2) в функцию по onclick нужно передать ссылку на сам объект - this
div onclick='img(this)'


<html>
<script>
function img(el) {
	el.style.backgroundImage = "url(https://img3.goodfon.ru/original/1920x1080/6/a4/krasivaya-devushka-amber-heard.jpg)"
}
</script>
	<body>
		<div onclick='img(this)' style='width:100%;height:100%;margin-bottom: 20px; background-image: url(https://vdudvdud.ru/wa-data/public/shop/products/30/00/30/images/296/296.970.jpg);'></div>
	</body>
</html>


3) вот пример галереи БЕЗ обращения по ID и ClassName, но нужно четко представлять себе структуру документа, поэтому с Id и ClassName все же удобнее, по крайней мере находить блок где надо менять фон, потому что такая конструкция
document.body.children[0].children[0].style.backgroundImage = document.body.children[0].children[1].children[0].style.backgroundImage;

это , ну ппц....

вот галлерея:
<html>
<style>
.bigimage {
	width:100%;
	height:75%;
	margin-bottom: 20px;
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.thumbnail {
	float:left;
	width:19%;
	height:20%;
	border-style: solid;
	border-width: 1px;
	border-color: #333390;
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
</style>
<script>
window.onload = function () {
	document.body.children[0].children[0].style.backgroundImage = document.body.children[0].children[1].children[0].style.backgroundImage;
}

function img(el) {
	el.parentElement.parentElement.children[0].style.backgroundImage = el.style.backgroundImage;
}
</script>
	<body>
	<div>
		<div class="bigimage"></div>
		<div>
			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://hdqwalls.com/download/willa-holland-5k-2018-tc-1920x1080.jpg)"></div>
			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://img3.goodfon.ru/original/1920x1080/6/a4/krasivaya-devushka-amber-heard.jpg)"></div>
			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://img1.goodfon.com/original/1920x1080/3/9f/anastasiya-scheglova-devushka-4354.jpg)"></div>
			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://img3.goodfon.ru/wallpaper/original/a/86/kira-kristina-naytli-keira.jpg)"></div>
			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://wallbox.ru/wallpapers/main2/201731/1501485774597edace3af7c6.85452886.jpg)"></div>
		</div>
	</div>
	</body>
</html>


PS: смотрите (изучайте) свойства и методы DOM и пр. пр.
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Разработать несистемный алерт
19 апр. 2024, в 20:11
500 руб./за проект
Ещё заказы