Question

我想将我的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";
      }
    }
  });

Answer 1

我们这里有两种方法：
第一：
我有两个具有唯一类或ID的图片，我想在点击圈子上显示它们：

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

单击SVG以显示图像滑块

1 个答案: