Question

当我点击拇指图像时，我想选择那个拇指图像，但是当我点击其他拇指图像时，前一个拇指图像仍然被选中

CSS代码：

.imgStyle:hover {
      border-color: black;
}
.imgStyle {
    height: 100px;
    width: 100px;
    border: 2px solid grey;
}
.active {
    border-color: red;
}

// js code

$(document).ready(function () {
    $('#divContainer img').on('click', function () {

        $(this).addClass('active');

        var imgURl = $(this).attr('src');

        $('#mainImage').fadeOut(1000, function () {
            $(this).attr('src', imgURl);
        }).fadeIn(1000);

    });
});

HTML ：

<img id="mainImage" src="images/Chrysanthemum.jpg" width="540" height="500" style="border:3px solid grey">

<br/>
<div id="divContainer">
    <img class="imgStyle" src="images/Chrysanthemum.jpg" />
    <img class="imgStyle" src="images/Desert.jpg" />
    <img class="imgStyle" src="images/Hydrangeas.jpg" />
    <img class="imgStyle" src="images/Jellyfish.jpg" />
    <img class="imgStyle" src="images/Koala.jpg" /> 
</div>

Answer 1

从已点击图片的active中删除siblings课程

$(document).ready(function() {
  $('#divContainer img').on('click', function() {
    $(this).addClass('active').siblings('img').removeClass('active');
    var imgURl = $(this).attr('src');
    $('#mainImage').fadeOut(1000, function() {
      $(this).attr('src', imgURl);
    }).fadeIn(1000);
  });
});

.imgStyle:hover {
  border-color: black;
}
.imgStyle {
  height: 100px;
  width: 100px;
  border: 2px solid grey;
}
.active {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="mainImage" src="images/Chrysanthemum.jpg" width="540" height="500" style="border:3px solid grey">
<br/>
<div id="divContainer">
  <img class="imgStyle" src="images/Chrysanthemum.jpg" />
  <img class="imgStyle" src="images/Desert.jpg" />
  <img class="imgStyle" src="images/Hydrangeas.jpg" />
  <img class="imgStyle" src="images/Jellyfish.jpg" />
  <img class="imgStyle" src="images/Koala.jpg" />
</div>

Answer 2

创建2 var：

                Var currentslide;

                var oldSlide;

在函数add

中

 At the top :

                 OldSlide= currentSlide;

                CurtentSlide=$(this);

然后将classe添加到currentSlide，并将其从当前幻灯片中删除。

对不起sintax，但我正在通过电话写作。

如何在幻灯片放映中添加选定图像中的类？

2 个答案: