图像过渡 CSS/JavaScript [重复]答案

【问题标题】：Image transition CSS/JavaScript [duplicate]图像过渡 CSS/JavaScript [重复]
【发布时间】：2020-02-04 13:03:45
【问题描述】：

所以我想在这些图像通过按钮更改时为它们添加过渡效果，但我不知道如何做到这一点，或者在主要样式 CSS 上或通过 JavaScript 的属性来做到这一点。

例如，给它这样的东西：transition: 2s linear。

var number;
var imagecount = document.getElementsByClassName('images');

function imageshow(b) {
  for (var i = 0; i < imagecount.length; i++) {
    if (i == b) {
      imagecount[i].style.display = 'block';
      number = i;
    } else {
      imagecount[i].style.display = 'none';
    }
  }
}

function prev(number) {
  imageshow(number - 1)
  if (number == 0) {
    imageshow(imagecount.length - 1);
  }
}

function next(number) {
  imageshow(number + 1)
  if (number == imagecount.length - 1) {
    imageshow(0);
  }
}
imageshow(0);

body {
  margin: 0px;
}

.images {
  width: 700px;
  height: 500px;
  border-radius: 11px;
  border: outset 2px rgba(70, 70, 70, 0.616);
}

#slider {
  font-family: Arial, Helvetica, sans-serif;
}

<div id="slider">
  <img src="https://i.picsum.photos/id/874/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/99/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/684/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/556/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/886/536/354.jpg" class="images" alt=""><br>
  <button onclick="prev(number)">previous</button>
  <button onclick="next(number)">next</button>
</div>

【问题讨论】：

标签： javascript html css css-transitions

【解决方案1】：

你可以做这样的事情。

使用绝对定位重叠所有图像
使用不透明度隐藏图像（您无法从display: none 制作动画）
在图像上设置过渡
用js改变不透明度（或者最好加个类）

var number;
var imagecount = document.getElementsByClassName('images');

function imageshow(b) {
  for (var i = 0; i < imagecount.length; i++) {
    if (i == b) {
      imagecount[i].style.setProperty( 'opacity', '1' );
      number = i;
    } else {
      imagecount[i].style.setProperty( 'opacity', '0' );
    }
  }
}

function prev(number) {
  imageshow(number - 1)
  if (number == 0) {
    imageshow(imagecount.length - 1);
  }
}

function next(number) {
  imageshow(number + 1)
  if (number == imagecount.length - 1) {
    imageshow(0);
  }
}
imageshow(0);

body {
  margin: 0px;
}

#slider {
  position: relative;
  width: 700px;
  height: 500px;
  margin-bottom: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}
.images{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 700px;
  height: 500px;
  border-radius: 11px;
  border: outset 2px rgba(70, 70, 70, 0.616);
  transition: opacity 500ms;
}

<div id="slider">
  <img src="https://i.picsum.photos/id/874/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/99/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/684/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/556/536/354.jpg" class="images" alt="">
  <img src="https://i.picsum.photos/id/886/536/354.jpg" class="images" alt=""><br>
</div>
 <button onclick="prev(number)">previous</button>
  <button onclick="next(number)">next</button>

【讨论】：