Блог

Главная - Вопросы по программированию - Щелкните SVG для отображения слайдера изображения

Щелкните SVG для отображения слайдера изображения

#jquery #html #css #svg #onclick

#jquery #HTML #css #svg #onclick

Вопрос:

Я хочу превратить свой SVG (круги) в кнопки, при нажатии на каждый отдельный круг я хочу, чтобы отображался другой слайдер изображения. Как бы я это сделал? вот мой код..

 <div id="sidle">
  <img class="image" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" src="img/nelson-street/VORTER.jpg"alt>
  <img class="image" src="img/nelson-street/MAFYA.jpg"alt>
  <img class="image" src="img/nelson-street/nick-walker.jpg"alt>
  <img class="image" src="img/nelson-street/SOKER-VORTER-DREAM.jpg"alt>
</div>

<circle class="circles" id="SmallStreet" fill="#B9C3C6" cx="692" cy="344.4" r="12.7"title="Small Street"/>
    <circle class="circles" id="BellLane" fill="#B9C3C6" cx="721.9" cy="311" r="12.7"title="Bell Lane"/>
    <circle class="circles" id="Quay-NelsonStreet" fill="#B9C3C6" cx="652.3" cy="327.7" r="12.7"title="Quay and Nelson Street"/>

На данный момент я пытаюсь отобразить слайдер изображения при нажатии кнопки, но он сообщает мне, что слайдер не определен. Вот этот код…

 <button onclick="slider()"></button>
<div id="sidle">
  <img class="image" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" src="img/nelson-street/VORTER.jpg"alt>
  <img class="image" src="img/nelson-street/MAFYA.jpg"alt>
  <img class="image" src="img/nelson-street/nick-walker.jpg"alt>
  <img class="image" src="img/nelson-street/SOKER-VORTER-DREAM.jpg"alt>
</div>

$(function slider() {
    var obj = document.getElementById("sidle");
    var i;

    for (i = 0; i < obj.length; i  ) {
      if (obj[i].style.display == "none") {
        obj[i].style.display = "block";
      } else {
        obj[i].style.display = "none";
      }
    }
  });

Комментарии:

1. getElementById возвращает один элемент, поэтому не повторяйте его. Если у вас есть несколько элементов с одинаковым идентификатором, это недопустимый HTML, и методы DOM не помогут. Кроме того, вы оборачиваете свою slider функцию в объект jQuery, что делает ее функцией document.ready, и ее нельзя вызвать по имени. Если вы собираетесь использовать jQuery, используйте jQuery (т. е. используйте $('#slider') , .each и toggle() . Просмотрите некоторые руководства по jQuery, чтобы узнать больше о том, как заставить эти вещи работать.

2. Спасибо, глупо с моей стороны забыть функцию переключения.

Ответ №1:

здесь у нас есть два метода:
первый:
у меня есть два изображения с уникальным классом или идентификатором, и я хочу показать их в кругах щелчка:

  <div id="sidle">
  <img class="image" id="img-SmallStreet" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" id="img-BellLane" src="img/nelson-street/VORTER.jpg"alt>
 </div>
 <circle class="circles" id="SmallStreet" /> 
 <circle class="circles" id="BellLane" />
 <script>
 $(document).ready(function(){
    $("#SmallStreet").click(function(){ $("#img-SmallStreet").fadeIn();  });
    $("#BellLane").click(function(){ $("#img-BellLane").fadeIn();  });
 });
 </script>

или простым и лучшим способом:

  <div id="sidle">
  <img class="image" id="img-SmallStreet" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" id="img-BellLane" src="img/nelson-street/VORTER.jpg"alt>
 </div>
 <circle class="circles" id="SmallStreet" /> 
 <circle class="circles" id="BellLane" />
 <script>
 $(document).ready(function(){
    $(".circles").click(function(){ 
        $id = $(this).attr('id');
        $("#sidle #" id).fadeIn();
    });
 });
 </script>

у меня много изображений, и я хочу сдвинуть их:

  <script>
 $(document).ready(function(){
    let index = 0;
    let lenght = $(".img").length;
    $(".circles").click(function(){ 
        $index = $(this).index();
        $("img").hide();
        $("img").eq($index).fadeIn();
        $index  =1;
        if($index >= length) $index = 0;
    });
 });
 </script>