单击按钮时，我尝试将 (my-images 类) 的前面元素 (image-1) 移到类的后面，然后将元素上移。到目前为止，这就是我所做的，但它没有起到什么作用。知道我可能做错了什么吗？

HTML

<div class="elegant">
  <button class="button" onclick="leftFunction()">Button</button>
  <div class="my-image" id="image-1">
    <div class="banner">
      <h1 class=imageLetters>Blue</h1>
    </div>
  </div>
  <div class="my-image" id="image-2">
    <div class="banner">
      <h1 class=imageLetters>Red</h1>
    </div>
  </div>
  <div class="my-image" id="image-3">
    <div class="banner">
      <h1 class=imageLetters>Yellow</h1>
    </div>
  </div>
  <button class="button">Button</button>
</div>

JQuery

x = 0;
function leftFunction() {
  x++;
  var count = $(".my-image").length;
  if (x > count) {
    x = 0;
  }
  var image = document.getElementById("image-" + x);
  image.style.display = "none";
  $("image-" + x).append($(".my-image"));
  image.style.display = "block";
}

CSS

.elegant {
  background: #800000;
  display: flex;
  align-items: left;
  justify-content: center;
  height: 100%;
}

.button {
  background-color: #4caf50;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  height: 100px;
  width: 100px;
  align-self: center;
}

.banner {
  display: flex;
  margin: 0;
  z-index: 12;
  width: 40px;
  height: 300px;
  background: rgba(255, 255, 255, 1);
  color: black;
  mix-blend-mode: lighten;
  padding-bottom: 10px;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}

#image-1 {
  padding-left: 10px;
  height: 555px;
  width: 50px;
  top: 150px;
  left: 400px;
  background-image: url("https://images.pexels.com/photos/949129/pexels-photo-949129.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-size: 1100px 700px;
  background-position: -60px -20px;
  z-index: 4;
  margin-bottom: 20px;
  margin-top: 150px;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}
#image-1:hover {
  -moz-transform: scale(1.03);
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

#image-2 {
  padding-left: 10px;
  height: 560px;
  width: 100px;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.5);
  top: 150px;
  left: 400px;
  background-image: url("https://images.pexels.com/photos/949129/pexels-photo-949129.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-size: 1100px 700px;
  background-position: -170px -20px;
  z-index: 5;
  margin-bottom: 20px;
  margin-top: 150px;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}
#image-2:hover {
  -moz-transform: scale(1.03);
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}
#image-3 {
  padding-left: 10px;
  height: 565px;
  width: 150px;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.5);
  top: 150px;
  left: 400px;
  background-image: url("https://images.pexels.com/photos/949129/pexels-photo-949129.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-size: 1100px 700px;
  background-position: -280px -20px;
  z-index: 6;
  margin-bottom: 20px;
  margin-top: 150px;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}
#image-3:hover {
  -moz-transform: scale(1.03);
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

这是我制作的 codepen 示例https://codepen.io/Angatvir/pen/mjxjxd

解决方案

试试这个代码：

function leftFunction() {
var e = $('.my-image');

e.eq(0).insertAfter( e.eq(e.length - 1) )
}

https://codepen.io/vommbat/pen/VBXEOG

代码已更新（codepen 也已更新）

淡出和淡入：

function leftFunction() {
var e = $('.my-image');

e.eq(0).animate({
    opacity: 0 
  }, 1000, function() {
     $(this).insertAfter( e.eq(e.length - 1) ).animate({
    opacity: 1
  }, 1000) 
  });
}