javascript - 图像转换 CSS/JavaScript

Question

所以我想在这些图像通过按钮更改时添加过渡效果，但我不确定如何做到这一点，或者在主样式 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>

Answer 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>