Плавная смена картинок при нажатии на ссылки
Вложений: 1
Доброго времени суток. Перед тем, как создавать тему, внимательно ознакомился с другими похожими вопросами на форуме, но так и не смог решить проблему. Поэтому вопрос:
Как осуществить плавную смену картинок при нажатии на ссылки? Вложение 3709 Имеется: 4 ссылки, 4 картинки. Видна только первая картинка. Как при нажатии на "Картинка 2" плавно сменить первую, третью или четвертую картинку на вторую? Нажатие на "Картинка 3" приведет к смене первой, второй или четвертой картинки на третью. И так далее. Понимаю, что скорее всего потребуется применение jquery. Интересует конкретное решение, так как своими силами не справился. HTML-код: <a href="#">Картинка 1</a> <a href="#">Картинка 2</a> <a href="#">Картинка 3</a> <a href="#">Картинка 4</a> <img id="chimg" src="assets\img\portfolio\1.jpg"> |
rodion7195,
какая проблема присвоить класс картинке по клику на ссылку? |
Цитата:
<a href="#" onclick="document.getElementById("chimg").src='assets\img\portfolio\2.jpg'">Картинка 2</a>
Но при этом страница перезагружается и при смене нет плавности. А зачем у картинки менять класс? Скорее src же поменять надо. Нет? |
rodion7195,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.content{
position: relative;
}
.content img{
position: absolute;
opacity: 0;
transition: all 1.2s ease-in-out;
display: block;
}
.content img.active{
opacity: 1;
}
.content .pic.active{
background-color: #8B4513;
color: #FFFFFF;
}
</style>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
var content = document.querySelector(".content");
content.addEventListener("click", function(event) {
var target = event.target;
if (target = target.closest(".pic")) {
event.preventDefault();
var a = content.querySelectorAll(".pic");
var img = content.querySelectorAll("img");
var selected = [].indexOf.call(a, target);
[].forEach.call(a, function(el, i) {
(i == selected) ? (el.classList.add("active"), img[i].classList.add("active")):
(el.classList.remove("active"), img[i].classList.remove("active"))
})
}
})
});
</script>
</head>
<body>
<div class="content">
<a href="" class="pic active">1картинка</a>
<a href="" class="pic">2картинка</a>
<a href="" class="pic">3картинка</a>
<img src="https://s1.1zoom.ru/prev2/514/Cats_Glance_Whiskers_513437_300x200.jpg" alt="" class="active">
<img src="https://trackimo.com/wp-content/uploads/2016/05/TRACKIMO-FI-5-Year-Study-Reveals-Shocking-Statistics-on-Lost-Pets-300x200.jpg" alt="">
<img src="https://www.walldevil.com/wallpapers/w02/thumb/812503-cats-kittens-siamese.jpg" alt="">
</div>
</body>
</html>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.content{
position: relative;
}
.content img{
position: absolute;
opacity: 0;
transform: scale(0);
transition: all 1.2s ease-in-out;
display: block;
}
.content img.active{
opacity: 1;
transform: scale(1);
}
.content .pic.active{
background-color: #8B4513;
color: #FFFFFF;
}
</style>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
var content = document.querySelector(".content");
content.addEventListener("click", function(event) {
var target = event.target;
if (target = target.closest(".pic")) {
event.preventDefault();
var a = content.querySelectorAll(".pic");
var img = content.querySelectorAll("img");
var selected = [].indexOf.call(a, target);
[].forEach.call(a, function(el, i) {
(i == selected) ? (el.classList.add("active"), img[i].classList.add("active")):
(el.classList.remove("active"), img[i].classList.remove("active"))
})
}
})
});
</script>
</head>
<body>
<div class="content">
<a href="" class="pic active">1картинка</a>
<a href="" class="pic">2картинка</a>
<a href="" class="pic">3картинка</a>
<img src="https://s1.1zoom.ru/prev2/514/Cats_Glance_Whiskers_513437_300x200.jpg" alt="" class="active">
<img src="https://trackimo.com/wp-content/uploads/2016/05/TRACKIMO-FI-5-Year-Study-Reveals-Shocking-Statistics-on-Lost-Pets-300x200.jpg" alt="">
<img src="https://www.walldevil.com/wallpapers/w02/thumb/812503-cats-kittens-siamese.jpg" alt="">
</div>
</body>
</html>
|
Как у вас так легко все получается?)) Я дня два мучился! Я понимаю css и html, но вот скрипты... Скажите, где можно научиться или хотя бы начать изучение языка java? Потому что я половину в вашем скрипте даже не понимаю(
|
Цитата:
|
Цитата:
|
Вот видите, я даже этого не знал!)))
|
Спасибо вам огромное! Обещаю начать исправлять свою неграмотность
|
| Часовой пояс GMT +3, время: 10:27. |