Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.11.2017, 22:41
Новичок на форуме
Отправить личное сообщение для rodion7195 Посмотреть профиль Найти все сообщения от rodion7195
 
Регистрация: 28.11.2017
Сообщений: 5

Плавная смена картинок при нажатии на ссылки
Доброго времени суток. Перед тем, как создавать тему, внимательно ознакомился с другими похожими вопросами на форуме, но так и не смог решить проблему. Поэтому вопрос:
Как осуществить плавную смену картинок при нажатии на ссылки?
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

rodion7195,
какая проблема присвоить класс картинке по клику на ссылку?
Ответить с цитированием
  #3 (permalink)  
Старый 28.11.2017, 23:14
Новичок на форуме
Отправить личное сообщение для rodion7195 Посмотреть профиль Найти все сообщения от rodion7195
 
Регистрация: 28.11.2017
Сообщений: 5

Сообщение от рони Посмотреть сообщение
rodion7195,
какая проблема присвоить класс картинке по клику на ссылку?
Я пытался сделать вот так:
<a href="#" onclick="document.getElementById("chimg").src='assets\img\portfolio\2.jpg'">Картинка 2</a>

Но при этом страница перезагружается и при смене нет плавности. А зачем у картинки менять класс? Скорее src же поменять надо. Нет?
Ответить с цитированием
  #4 (permalink)  
Старый 28.11.2017, 23:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от 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>
Ответить с цитированием
  #6 (permalink)  
Старый 28.11.2017, 23:24
Новичок на форуме
Отправить личное сообщение для rodion7195 Посмотреть профиль Найти все сообщения от rodion7195
 
Регистрация: 28.11.2017
Сообщений: 5

Как у вас так легко все получается?)) Я дня два мучился! Я понимаю css и html, но вот скрипты... Скажите, где можно научиться или хотя бы начать изучение языка java? Потому что я половину в вашем скрипте даже не понимаю(
Ответить с цитированием
  #7 (permalink)  
Старый 28.11.2017, 23:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от rodion7195
изучение языка java
javascript!!!
Ответить с цитированием
  #8 (permalink)  
Старый 28.11.2017, 23:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от rodion7195
где можно научиться
вверху меню Учебник
Ответить с цитированием
  #9 (permalink)  
Старый 28.11.2017, 23:38
Новичок на форуме
Отправить личное сообщение для rodion7195 Посмотреть профиль Найти все сообщения от rodion7195
 
Регистрация: 28.11.2017
Сообщений: 5

Вот видите, я даже этого не знал!)))
Ответить с цитированием
  #10 (permalink)  
Старый 28.11.2017, 23:39
Новичок на форуме
Отправить личное сообщение для rodion7195 Посмотреть профиль Найти все сообщения от rodion7195
 
Регистрация: 28.11.2017
Сообщений: 5

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавная смена изображения при клике Kirilbl4 jQuery 6 18.02.2016 15:43
Активация checkbox при нажатии на текст и изменение стиля у текста. ilyakor jQuery 2 10.06.2014 19:34
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 17:08
смена текста при нажатии на кнопку katjuha6 Элементы интерфейса 8 03.02.2013 23:05
Смена изображений при нажатии кнопки. Rel60 Общие вопросы Javascript 1 14.09.2009 11:05