Question

我是JavaScript新手，我创建了一个图像滑块，但现在我想要一个按钮，即：人类和机器人，如果点击人体按钮，当前图像显示为人，我想要一个警报信息......该怎么做？我需要将图像存储在数组中吗？完全混乱....需要尽快....

    <code>
<pre>
<html>
<head>
  <script src="jquery-1.12.2.min.js"></script>
  <script src="main.js"></script>
  <script>
    function swapImages(){
      var $active = $('#myGallery .active');
      var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
      $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
      });
    }

    $(document).ready(function(){
      // Run our swapImages() function every 5secs
      setInterval('swapImages()', 200);
    })
    </script>
  <style>
    #myGallery{
      position:relative;
      width:400px; /* Set your image width */
      height:300px; /* Set your image height */
    }
    #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }
    #myGallery img.active{
      display:block;
    }
  </style>
</head>
<body>
  <div id="myGallery">
    <img src="image1.png" class="active" id="1" />
    <img src="image2.png" />
    <img src="image3.png" />
  </div>
  <button id="bt1" >Human</button>
<button id="bt2" >robot</button>
</body>
</html>
</pre>
</code>

Answer 1

所做的更改

$("#bt1,#bt2").click(function() {
    alert($('img.active').attr('src'));
});

工作演示

＆＃13;

function swapImages() {
  var $active = $('#myGallery .active');
  var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
  $active.fadeOut(function() {
    $active.removeClass('active');
    $next.fadeIn().addClass('active');
  });
}

$(document).ready(function() {
  $("#bt1,#bt2").click(function() {
    alert($('img.active').attr('src'));
  });
  setInterval(swapImages, 200);
});

＆＃13;

#myGallery {
  position: relative;
  width: 400px;
  /* Set your image width */
  height: 300px;
  /* Set your image height */
}
#myGallery img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
#myGallery img.active {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myGallery">
  <img src="image1.png" class="active" id="1" />
  <img src="image2.png" />
  <img src="image3.png" />
</div>
<button id="bt1">Human</button>
<button id="bt2">robot</button>

＆＃13;

Answer 2

function swapImages() {
  var $active = $('#myGallery .active');
  var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
  $active.fadeOut(function() {
    $active.removeClass('active');
    $next.fadeIn().addClass('active');
  });
}

$(document).ready(function() {
  // Run our swapImages() function every 5secs
  setInterval('swapImages()', 200);
})

$('#bt1').click(function() { //click of human button
  var image = $('#myGallery').find('img');

  image.each(function() {
    if ($(this).hasClass('active')) { //check if image has active class
      console.log($(this).attr('src')) //print the src of image in console
    }



  })



})

#myGallery {
  position: relative;
  width: 400px;
  /* Set your image width */
  height: 300px;
  /* Set your image height */
}
#myGallery img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
#myGallery img.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myGallery">
  <img src="image1.png" class="active" id="1" />
  <img src="image2.png" />
  <img src="image3.png" />
</div>
<button id="bt1">Human</button>
<button id="bt2">robot</button>

当前图片处于活动状态。你可以用它来知道哪个是活动图像。检查具有活动类的图像的详细信息，并且您有图像

单击按钮以获取活动的图像信息

2 个答案: