HTML Как изменить изображение на клике - PullRequest
Новая
       0

HTML Как изменить изображение на клике

0 голосов
/ 28 сентября 2018

Я пытаюсь получить изображение, которое изменяется при нажатии: при щелчке по изображению 1 переключитесь на изображение 2, при щелчке по изображению 2 измените на изображение 3, а при нажатии на изображение 3 оно изменится на изображение 1. 

<p>
    <img alt="" src="assets/img1.png" 
        style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"   />


<script language="javascript">
function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "assets/img1.png") 
    {
        document.getElementById("imgClickAndChange").src = "assets/img2.png";

    }
    else if (document.getElementById("imgClickAndChange").src == "assets/img2.png")
    {
        document.getElementById("imgClickAndChange").src = "assets/img3.png";

    }
    else if(document.getElementById("imgClickAndChange").src == "assets/img3.png"){
    document.getElementById("imgClickAndChange").src = "assets/img1.png"

    }

Ответы [ 4 ]

0 голосов
/ 28 сентября 2018

Привет, это другой подход. new ClickListener () - это класс, используемый для обработки вашей логики и логики dom 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Image click</title>
  </head>
  <body>
    <div id="player">
    </div>

    <script>
      class ClickListener {
        constructor() {
          this.rootElement = document.querySelector( "#player" );
          this.element = document.createElement("img");
          this.rootElement.appendChild(this.element);
          this.images = ['./1.jpg', './2.jpg', './3.jpg']
          this.idx = 0
          this.init()
        }

        init() {
          this.element.src = this.images[this.idx]
          this.element.style.width = `400px`;
          this.element.style.height = `400px`;
          this.element.onclick = this.nextImage.bind(this)
        }

        nextImage() {
          this.idx++;
          if(this.idx >= this.images.length) {
            this.idx = 0;
          }
          this.element.src = this.images[this.idx]
        }

      }
      new ClickListener()
    </script>
  </body>
</html>
0 голосов
/ 28 сентября 2018

Чистое и оптимальное решение на мой взгляд.Как раньше говорили пользователи.Хорошо использовать массив для хранения путей к изображениям. 

var images = ["https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350", "https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426", "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350"]

var imgState = 0;

var imgTag = document.getElementById("imgClickAndChange");

imgTag.addEventListener("click", function (event) {
  imgState = (++imgState % images.length);
  event.target.src = images[imgState];
});

Решение

0 голосов
/ 28 сентября 2018

В вашем коде было много синтаксических ошибок.Я вычистил их здесь, в коде, где вы видите, что ваша основная логика была правильной.Хотя, как отмечали другие пользователи, есть более элегантные способы решения этой проблемы.

https://codepen.io/anon/pen/MPYgxM

HTML: 

<p>
    <img alt="" src="https://r1.ilikewallpaper.net/ipad-wallpapers/download/26516/Natural-Grove-Green-Trees-Path-ipad-wallpaper-ilikewallpaper_com.jpg" 
        style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"   />
        </p>

JS: 

function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "https://r1.ilikewallpaper.net/ipad-wallpapers/download/26516/Natural-Grove-Green-Trees-Path-ipad-wallpaper-ilikewallpaper_com.jpg") 
    {
        document.getElementById("imgClickAndChange").src = "https://st2.depositphotos.com/1000438/6182/i/950/depositphotos_61826015-stockafbeelding-cascades-in-nationaal-park-plitvice.jpg";

    }
    else if (document.getElementById("imgClickAndChange").src == "https://st2.depositphotos.com/1000438/6182/i/950/depositphotos_61826015-stockafbeelding-cascades-in-nationaal-park-plitvice.jpg")
    {
        document.getElementById("imgClickAndChange").src = "https://orig00.deviantart.net/6787/f/2016/104/5/6/aria_maleki___natural_view_of_waterfall_by_aria_maleki-d9yytu8.jpg";

    }
    else if(document.getElementById("imgClickAndChange").src == "https://orig00.deviantart.net/6787/f/2016/104/5/6/aria_maleki___natural_view_of_waterfall_by_aria_maleki-d9yytu8.jpg"){
    document.getElementById("imgClickAndChange").src = "https://r1.ilikewallpaper.net/ipad-wallpapers/download/26516/Natural-Grove-Green-Trees-Path-ipad-wallpaper-ilikewallpaper_com.jpg"

    }
}
0 голосов
/ 28 сентября 2018

Вы можете увеличивать значение при каждом нажатии и обновлять img.на основе увеличенного значения 

 <img alt="" src="assets/img1.png" style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"   />

   <script language="javascript">
        var counter = 1;
        function changeImage() {
            counter > 3 ? counter = 1 : counter++; 
            document.getElementById("imgClickAndChange").src = "assets/img"+counter+".png";
        }

    </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...