javascript - 如何使用相对位置进行图像褪色？

Question

我正在尝试集成来自 here 的代码在点击时更改幻灯片的图像(归功于 cssyphus):

$(function() {
  $("input:button").click(function() {
    $("img:last").fadeToggle("slow", function() {
      $(this).prependTo(".frame").fadeIn()
    });
  });
});

function Forward() {
  $("img:first").fadeToggle("slow", function() {
    $(this).appendTo(".frame").fadeIn(800)
  });
}

function Backward() {
  $("img:last").fadeToggle("slow", function() {
    $(this).prependTo(".frame").fadeIn()
  });
}

.frame {
  position: relative;
  left: 35%;
}

img {
  position: absolute;
  max-width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>
  <input type="button" value="PrependTo" />
  <button onclick="Forward()">Go Forward</button>
  <button onclick="Backward()">Go Backward</button>

</h1>
<div class="frame">
  <img src="http://placeimg.com/240/180/animals">
  <img src="http://placeimg.com/240/180/nature">
  <img src="http://placeimg.com/240/180/people">
  <img src="http://placeimg.com/240/180/sepia">
</div>

问题的出现是由于 position:absolute 将图像堆叠在彼此之上的效果。将其切换到 position:relative 取消堆叠图像，它们将彼此相邻。使用 position:absolute 会丢弃代码中要集成的所有其他元素。我该如何解决这个问题？

Answer 1

很难想象幻灯片如何影响布局，但通过查看您的代码，我会尝试以下两种方法之一:

1. 从 .frame 中删除 left: 35%; css - 我不确定为什么会这样，但它会插入整个框架容器幻灯片结束

   .frame {
       position: relative;
   }
   

2. 调整 img 的 CSS，使其仅影响第一个子节点之后的第 n 个子节点，因此它们将相互堆叠，而第一个子节点是继承/相对的:

   img {
       position: relative;
   }
   img:nth-child(n+2) {
       position: absolute;
       top: 0;
       left: 0;
   }