@alexkomp

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

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

Или, как сделать вот такой слайдер?
5d3341c314300693328737.png
  • Вопрос задан
  • 186 просмотров
Решения вопроса 1
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 и пр. пр.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@vladdimir
Верстальщик
Алгоритм
1. Вешаем обработчик на галерею addEventListener('click', onClickGallery)
2. пишем функцию onClickGallery.
Что она должна делать?
- Если клик по превью, то изменить адрес большого изображения. И добавить индикатор текущего изображения у превью (синяя точка под последней прьвюшкой).
- Если клик по стрелке, то показать следующее/предыдущее изображение.
- Если клик по активному изображению или в другом месте, выйти из функции.

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

Еще можно оптимизировать, чтобы в превью стояли картинки маленького разрешения, а в большую ставить полномасштабные варианты. Это ускорит загрузку сайта)
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
Webimatic Санкт-Петербург
от 120 000 руб.
25 авг. 2019, в 23:48
4000 руб./за проект
25 авг. 2019, в 22:35
1000 руб./за проект
25 авг. 2019, в 22:10
3000 руб./за проект