CSS 幻灯片过渡

Question

我已经用动态导入的图像制作了 CSS 幻灯片，但现在在添加过渡时遇到问题。我希望当我单击下一个或上一个按钮时图像能够滑动，但找不到此问题的解决方案。这是我当前代码的片段：

$("#Next").click(function(){
	$("#Slider").append($("#Slider img:first-of-type"));
});

$("#Prev").click(function(){
	$("#Slider").prepend($("#Slider img:last-of-type"));
});

html{
	align-items: center;
	background-color: #31353D;
	display: flex;
	justify-content: center;
}

#Wrapper {
  margin-top: 20px;
}

#Slideshow{
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

#Slider{
	border: 5px solid #1C1D21;
	height: 568px;
	overflow: hidden;
	width: 1024px;
}

#Slider img{
	height: 568px;
	width: 1024px;
	transition: all 1s;
}

#Arrows{
	display: flex;
	justify-content: space-between;
	height: 30px;
	position: absolute;
	width: 1024px;
}

#Arrows i{
	background-color: rgba(255, 255, 255, .25);
	color: #1C1D21;
	cursor: pointer;
	height: 30px;
	padding: 15px;

	transition: background-color .5s, color .5s;
}

#Arrows i:first-of-type{
	padding-right: 20px;
}

#Arrows i:last-of-type{
	padding-left: 20px;
}

#Arrows i:hover{
	background-color: rgba(28,29,33, .75);
	color: #EEEFF7;
}

<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="css/slideshow.css">
    <script src="js/display.js"></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <section id="Wrapper">
    	<div id="Slideshow">
    		<div id="Slider">
          <img src="http://via.placeholder.com/1024x568.jpg?text=1">
          <img src="http://via.placeholder.com/1024x568.jpg?text=2">
          <img src="http://via.placeholder.com/1024x568.jpg?text=3">
          <img src="http://via.placeholder.com/1024x568.jpg?text=4">
          <img src="http://via.placeholder.com/1024x568.jpg?text=5">
    		</div>
    		<div id="Arrows">
    			<i id="Prev" class="fa fa-chevron-left fa-2x" aria-hidden="true"></i>
    			<i id="Next" class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
    		</div>
    	</div>
      <script src="js/slideshow.js"></script>
    </section>

  </body>
</html>

当您单击下一个或上一个按钮时，有什么方法可以添加到下一个图像的过渡吗？

Answer 1

仅使用 CSS 来实现您想要的效果是不够的。我看到你也是用JS来实现滑动动画，所以我给了自己一个也用JS来解决问题的选择。这个想法是transform: translate(...)结合使用 和来执行翻译transition来制作滑动动画。我们将对幻灯片内的图像进行翻译。

下面是一个示例，展示了如何完成此操作。我选择使用 vanilla JS 而不是 jQuery，因为看起来你不需要 jQuery。

虽然不相关，但我已经修复了您的 HTML，以减少嵌套，并且还移动了您的箭头 div，以便更容易使用 CSS 进行调整。

const next = document.querySelector('#Next')
const prev = document.querySelector('#Prev')
const slider = document.querySelector('#Slider')

let images = slider.querySelectorAll('img')
let currentImageIndex = 0
let maxImageIndex = images.length - 1

next.addEventListener('click', e => {
  updateCurrentImageIndex(1)
  slideImage()
})

prev.addEventListener('click', e => {
  updateCurrentImageIndex(-1)
  slideImage()
})

function updateCurrentImageIndex(value) {
  currentImageIndex += value
  if (currentImageIndex < 0) currentImageIndex = maxImageIndex
  else if (currentImageIndex > maxImageIndex) currentImageIndex = 0
}

function slideImage() {
  images.forEach(image => {
    image.style.transform = `translateX(${-100 * currentImageIndex}%)`
  })
}

* {
  box-sizing: border-box;
}

html {
  align-items: center;
  background-color: #31353D;
  display: flex;
  justify-content: center;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#Slider {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  border: 5px solid #1C1D21;
  overflow: hidden;  
}

#Slider img {
  max-height: 100%;
  max-width: 100%;  
  flex: 0 0 100%;
  transition: all 1s;
}

#Arrows {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#Arrows i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, .25);
  color: #1C1D21;
  cursor: pointer;
  height: 60px;
  padding: 15px;
  transition: background-color .5s, color .5s;
}

#Arrows i:last-of-type {
  left: 100%;
  transform: translate(-100%, -50%);
}

#Arrows i:hover {
  background-color: rgba(28, 29, 33, .75);
  color: #EEEFF7;
}

<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="css/slideshow.css">
  <script src="js/display.js"></script>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
    <div id="Slider">
      <img src="http://via.placeholder.com/1024x568.jpg?text=1">
      <img src="http://via.placeholder.com/1024x568.jpg?text=2">
      <img src="http://via.placeholder.com/1024x568.jpg?text=3">
      <img src="http://via.placeholder.com/1024x568.jpg?text=4">
      <img src="http://via.placeholder.com/1024x568.jpg?text=5">
      <div id="Arrows">
        <i id="Prev" class="fa fa-chevron-left fa-2x" aria-hidden="true"></i>
        <i id="Next" class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
      </div>
    </div>
    <script src="js/slideshow.js"></script>

</body>

</html>