Форум

rodion7195 · #1 (**permalink**) 28.11.2017, 22:41

Доброго времени суток. Перед тем, как создавать тему, внимательно ознакомился с другими похожими вопросами на форуме, но так и не смог решить проблему. Поэтому вопрос:
Как осуществить плавную смену картинок при нажатии на ссылки?
1.jpg
Имеется: 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">

рони · #2 (**permalink**) 28.11.2017, 22:57

rodion7195,
какая проблема присвоить класс картинке по клику на ссылку?

rodion7195 · #3 (**permalink**) 28.11.2017, 23:14

Сообщение от рони

rodion7195,
какая проблема присвоить класс картинке по клику на ссылку?

Я пытался сделать вот так:

<a href="#" onclick="document.getElementById("chimg").src='assets\img\portfolio\2.jpg'">Картинка 2</a>

Но при этом страница перезагружается и при смене нет плавности. А зачем у картинки менять класс? Скорее src же поменять надо. Нет?

рони · #4 (**permalink**) 28.11.2017, 23:19

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>

рони · #5 (**permalink**) 28.11.2017, 23:21

Сообщение от rodion7195

А зачем у картинки менять класс?

<!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>

rodion7195 · #6 (**permalink**) 28.11.2017, 23:24

Как у вас так легко все получается?)) Я дня два мучился! Я понимаю css и html, но вот скрипты... Скажите, где можно научиться или хотя бы начать изучение языка java? Потому что я половину в вашем скрипте даже не понимаю(

рони · #7 (**permalink**) 28.11.2017, 23:36

Сообщение от rodion7195

изучение языка ~~java~~

javascript!!!

рони · #8 (**permalink**) 28.11.2017, 23:37

Сообщение от rodion7195

где можно научиться

вверху меню Учебник

rodion7195 · #9 (**permalink**) 28.11.2017, 23:38

Вот видите, я даже этого не знал!)))

rodion7195 · #10 (**permalink**) 28.11.2017, 23:39

Спасибо вам огромное! Обещаю начать исправлять свою неграмотность

Форум

Справочник

Discord чат

Курсы javascript