Плавная смена картинок при нажатии на ссылки
Вложений: 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? Потому что я половину в вашем скрипте даже не понимаю(
|
Цитата:
|
Цитата:
|
Вот видите, я даже этого не знал!)))
|
Спасибо вам огромное! Обещаю начать исправлять свою неграмотность
|
помогите пожалуйста, что изменить чтоб ссылки были в одном div а картинки менялись в другом div
спасибо |
Пример кода приведите.
Один див с сылками, другой див с картинками.... |
Цитата:
опишу проблему полностью, чтоб не ходить вокруг да около. есть на одной странице два различных блока с ссылками ... и два блока с картинками... необходимо чтоб они работали в разных div .... вот пример кода <div class="box1"> <a href="#">Картинка 1</a> <a href="#">Картинка 2</a> <a href="#">Картинка 3</a> <a href="#">Картинка 4</a> </div> <div class="img1"> <img src="из_box1\1.jpg">+TEXT </div> <div class="box2"> <a href="#">Картинка 1</a> <a href="#">Картинка 2</a> <a href="#">Картинка 3</a> <a href="#">Картинка 4</a> </div> <div class="img2"> <img src="из_box2\1.jpg">+TEXT </div> помогите пожалуйста .... очень очень прошу ... я больше месяца пытаюсь решить проблему |
Рони, а почему у вас в строке #42 в последнем листинге был использован тернарный оператор в колбеке а не if ?
|
Цитата:
|
patisosha,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
Я прошу прощения что не понятно задал свой вопрос.
написал тут, так как обсуждался скрипт похожий на такой как у меня. Есть рабочий скрипт
function l_image (b,a) { document.getElementById(b).src='image/'+a; }
<img src="image/img_1.png" id="layer_1"></br>
<img src="image/img_2.png" id="layer_2"></br>
Собачки: <a href="javascript:l_image('layer_1','img_3.png')">Шарик</a>,
<a href="javascript:l_image('layer_1','img_4.png')">Тузик</a>.
</br>
Кошечки: <a href="javascript:l_image('layer_2','img_5.png')">Барсик</a>,
<a href="javascript:l_image('layer_2','img_6.png')">Пушок</a>.
Нужно чтоб при клике с фотками добавлялся дополнительный DIV примерно так:
<img src="image/img_1.png" id="layer_1"></br> <div id="111">тут что-то о собачках</div>
<img src="image/img_2.png" id="layer_2"></br> <div id="222">тут что-то о кошечках</div>
Собачки: <a href="javascript:l_image('layer_1','img_3.png')">шарик</a> <div id="333">тут инфа и ссылки о Шарике</div>,
<a href="javascript:l_image('layer_1','img_4.png')">тузик</a> <div id="444">тут инфа и ссылки о Тузике</div>.
</br>
Кошечки: <a href="javascript:l_image('layer_2','img_5.png')">барсик</a> <div id="555">тут инфа и ссылки о Барсике</div>,
<a href="javascript:l_image('layer_2','img_6.png')">пушок</a> <div id="666">тут инфа и ссылки о Пушке</div>.
еще раз прошу прощения, надеюсь на этот раз я оформил все верно, и очень очень надеюсь на вашу помощь. спасибо |
А где брать информацию, какие div добавлять надо?
Как узнать, что при клике на первую ссылку, нужно после картинки добавить именно <div id="111">тут что-то о собачках</div>, а после ссылки <div id="333">тут инфа и ссылки о Шарике</div>? |
да я к сожалению в этом глиняный чайник, идея есть, а как реализовать я понятия не имею :( :( :( :(
может я в сообщении не понятно написал, идея в том что при клике на ссылку не только меняется изображение, но и добавляется див в котором содержится информация относящаяся именно к тому изображению |
может отдельно создать дополнительные блоки с разным ID ... и сделать их невидимыми.... а при переходе по ссылке тот блок что указан в ссылке становится видимым ....
ссылка на картинку должна быть что-то типа такого <a href="javascript:l_image('layer_2','img_6.png', ВКЛ div id="нужный див")"> это мысли |
| Часовой пояс GMT +3, время: 10:18. |