Форум

TurnerIT · #1 (**permalink**) 29.06.2017, 22:41

У меня вот такой вопрос. Я хотел написать код(тестовая задача) который основное изображение меняется при клике на уменьшенный вариант.Вроде просто,и в голове уже созрел план.Я хотел что бы при клике выбранной картинке менялись CSS свойства, которые соответствовали бы размеру и расположению основной картинки.И одна другую как бы заменяла. Вот кусок кода.

<script>
    var img = document.getElementsByClassName(".images")
    var selectImg;
    img.onclick = function(event){
      var target = event.target;
       //if(target != img)return;
       var selectImg = document.createElement("div");
       div.className = newImg;
       div.innerHTML = target;
    } 
  </script>
</head>
<body>
  <div class="wrapper">
    <div class="mainImg">
      <img src="img/hot.jpg">
    </div>
    <div class="images">
      <img src="img/Beautiful.jpg" alt="">
      <img src="img/Curly.jpg" alt="">
      <img src="img/Libr.jpg" alt="">
      <img src="img/Redhead.jpg" alt="">
      <img src="img/Winter.jpg" alt="">

    </div>

Я на форуме впервые, да и в JS пробую тоже недавно.Пару нелеь всего.

рони · #2 (**permalink**) 29.06.2017, 23:00

TurnerIT,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

</head>
<body>
  <div class="wrapper">
    <div class="mainImg">
      <img src="img/hot.jpg">
    </div>
    <div class="images">
      <img src="img/Beautiful.jpg" alt="">
      <img src="img/Curly.jpg" alt="">
      <img src="img/Libr.jpg" alt="">
      <img src="img/Redhead.jpg" alt="">
      <img src="img/Winter.jpg" alt="">

    </div>
</div>
<script>
    var img = document.getElementsByClassName("images");
    var selectImg;
    img[0].onclick = function(event){
      var target = event.target;
       if(target.tagName != "IMG") return; //что и зачем вы тут  творите, одному вам ведомо
       var selectImg = document.createElement("div");
       selectImg.className = "newImg";
       selectImg.appendChild(target.cloneNode());
    }
  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript