时间戳

首页 > 解决方案 > 图像过渡 CSS/JavaScript

javascript - 图像过渡 CSS/JavaScript

问题描述

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

标签： javascripthtmlcsscss-transitions

解决方案

你可以做这样的事情。

  • 使用绝对定位重叠所有图像
  • 使用不透明度隐藏图像（您不能从中设置动画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>

推荐阅读