当用户点击＆＃34;转发＆＃34;时，如何更改正在显示的图像？或者＆＃34;落后＆＃34;按钮？

Question

<div class="container">
        <div class="row">
            <div class="col-md-3" id="img1">
                <img src="Aliens.jpg" class="imgclass">
            </div>
            <div class="col-md-3" id="img2">
                <img src="Ayrton%20Senna.jpg" class="imgclass">
            </div>
            <div class="col-md-3" id="img3">
                <img src="le%20Ferrari.jpg" class="imgclass">
            </div>
            <div class="col-md-3" id="img4">
                <img src="Batman%20and%20bats.jpg" class="imgclass">
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-1">
                <button id="back">&larr;</button>
            </div>
            <div class="col-md-10">
                <img src="Aliens.jpg"  class="bigimg">
            </div>
            <div class="col-md-1">
                <button id="fwd">&rarr;</button>
            </div>
        </div>
    </div>
<script>
        $(".imgclass").click(function(){$(".bigimg").attr("src",$(this).attr("src"))});
        var d=1;
        $("img"+d).click();
        $("#back").click(function(){d=d-1; if(d<1){d=4;} $("#img"+d).click()});
        $("#fwd").click(function(){d=d+1; if(d>4){d=1;} $("#img"+d).click()});
    </script>

我有4个图像，其中img img1到img4。我放了两个带有ID的按钮＆＃34; fwd＆＃34;和＆＃34;回来＆＃34;。当用户点击fwd按钮时，如果正在显示img3，现在它应该显示img4。如果他再次点击它，应该显示img1。类似的工作也是我想要的后退按钮。 .imgclass是给予所有这些图像的类（img1，img2，img3，img4），而.bigimg是应该显示这些图像的地方。但是这段代码不起作用！单击这两个按钮不会执行任何操作。请告诉我哪里出错了。

Answer 1

您可以尝试以下代码：

$(".imgclass").click(function() {
  $(".bigimg").attr("src", $(this).attr("src"));
});

var d = 1;
$("#img" + d + " .imgclass").click();

$("#back").click(function() {
  d = d - 1;
  if (d < 1) {
    d = 4;
  }
  $("#img" + d + " .imgclass").click()
});

$("#fwd").click(function() {
  d = d + 1;
  if (d > 4) {
    d = 1;
  }
  $("#img" + d + " .imgclass").click()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-3" id="img1">
      <img src="http://placehold.it/350x150 " class="imgclass">
    </div>
    <div class="col-md-3" id="img2">
      <img src="http://placehold.it/200x100 " class="imgclass">
    </div>
    <div class="col-md-3" id="img3">
      <img src="http://placehold.it/200x200 " class="imgclass">
    </div>
    <div class="col-md-3" id="img4">
      <img src="http://placehold.it/100x150 " class="imgclass">
    </div>
  </div>
  <br>
  <div class="row">
    <div class="col-md-1">
      <button id="back">&larr;</button>
    </div>
    <div class="col-md-10">
      <img src="Aliens.jpg" class="bigimg">
    </div>
    <div class="col-md-1">
      <button id="fwd">&rarr;</button>
    </div>
  </div>
</div>

Answer 2

试试这个;）

在这里，您使用.imgclass绑定点击事件，当您执行此操作时$("#img" + d).click();这是一个div元素，而不是图像更新的选择器，在此选择器中，您又犯了一个错误，忘记了前置{ {1}};

#

$(".imgclass").click(function() {
  $(".bigimg").attr("src", $(this).attr("src"));
});

var d = 1;
$("#img" + d + " .imgclass").click();

$("#back").click(function() {
  d = d - 1;
  if (d < 1) {
    d = 4;
  }
  $("#img" + d + " .imgclass").click()
});

$("#fwd").click(function() {
  d = d + 1;
  if (d > 4) {
    d = 1;
  }
  $("#img" + d + " .imgclass").click()
});

Answer 3

您需要将代码放在就绪块中：

<script>
  $(function() {
    $(".imgclass").click(function() { 
        $(".bigimg").attr("src",$(this).attr("src"))
    });

    var d=1;
    $("img"+d).click();
    $("#back").click(function(){
      d=d-1;
      if(d<1){
        d=4;
      }
      $("#img"+d).click()
    });
    $("#fwd").click(function(){
      d=d+1;
      if(d>4){
        d=1;
      }
      $("#img"+d).click()
    });
  });
</script>

Answer 4

尝试类似的内容：

 <div class="row">
            <div class="col-md-3 activePic" id="img1">
                <img src="Aliens.jpg" class="imgclass">
            </div>
            <div class="col-md-3" id="img2">
                <img src="Ayrton%20Senna.jpg" class="imgclass">
            </div>
            <div class="col-md-3" id="img3">
                <img src="le%20Ferrari.jpg" class="imgclass">
            </div>
            <div class="col-md-3" id="img4">
                <img src="Batman%20and%20bats.jpg" class="imgclass">
            </div>
        </div>
<div class="row">
            <div class="col-md-1">
                <button id="back">&larr;</button>
            </div>
            <div class="mainImg col-md-10">
                <img src="Aliens.jpg"  class="bigimg">
            </div>
            <div class="col-md-1">
                <button id="fwd">&rarr;</button>
            </div>
        </div>

JS：

$(function(){
    $('#back').click(function(){
      prev = $('.activePic').prev();
      if($('.activePic').is('[id^="img"]:first')) {
           prev = $('[id^="img"]:last');
      }
     $('.activePic').removeClass('activePic');
    prev.addClass('activePic');
    $('.mainImg img').attr('src',prev.find('img').attr('src'));
    });

    $('#fwd').click(function(){
      next = $('.activePic').next();
      if($('.activePic').is('[id^="img"]:last')) {
           next= $('[id^="img"]:first');
      }
     $('.activePic').removeClass('activePic');
    next.addClass('activePic');
    $('.mainImg img').attr('src',next.find('img').attr('src'));
    });
});

https://jsfiddle.net/bbkyebcw/

＆＃13;

＆＃13;

$('#back').click(function() {
  prev = $('.activePic').prev();
  if ($('.activePic').is('[id^="img"]:first')) {
    prev = $('[id^="img"]:last');
  }
  $('.activePic').removeClass('activePic');
  prev.addClass('activePic');
  $('.mainImg img').attr('src', prev.find('img').attr('src'));
});

$('#fwd').click(function() {
  next = $('.activePic').next();
  if ($('.activePic').is('[id^="img"]:last')) {
    next = $('[id^="img"]:first');
  }
  $('.activePic').removeClass('activePic');
  next.addClass('activePic');
  $('.mainImg img').attr('src', next.find('img').attr('src'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-3 activePic" id="img1">
      <img src="http://placehold.it/350x150 " class="imgclass">
    </div>
    <div class="col-md-3" id="img2">
      <img src="http://placehold.it/200x100 " class="imgclass">
    </div>
    <div class="col-md-3" id="img3">
      <img src="http://placehold.it/200x200 " class="imgclass">
    </div>
    <div class="col-md-3" id="img4">
      <img src="http://placehold.it/100x150 " class="imgclass">
    </div>
  </div>
  <br>
  <div class="row">
    <div class="col-md-1">
      <button id="back">&larr;</button>
    </div>
    <div class="mainImg col-md-10">
      <img src="Aliens.jpg" class="bigimg">
    </div>
    <div class="col-md-1">
      <button id="fwd">&rarr;</button>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;