在图像切换时使用javascript淡出背景图像

Question

我有三个图像，我的两个div在它们之间切换。但是，动画看起来太粗糙了。如何在切换前应用淡入淡出？

<div class="my-images">
   <div id="image-1"></div>
   <div id="image-2"></div>
</div>


<script>
  function displayNextImage() {
     x = (x === images.length - 1) ? 0 : x + 1;
     document.getElementById("image-1").style.backgroundImage = images[x];
     document.getElementById("image-2").style.backgroundImage = images[x];
  }

  function startTimer() {
     setInterval(displayNextImage, 10000);
  }

  var images = [],
  x = 0;
  images[0] = "url('images/snow.jpeg')";
  images[1] = "url('images/nike.jpeg')";
  images[2] = "url('images/motor.jpeg')";
</script>

这个循环不断，所以我不希望它只是在第一次加载时淡入。

Answer 1

如果没有JQuery，你就会遇到跨浏览器的兼容性问题。因此，我建议您使用JQuery来实现这一点。

<div class="my-images">
   <div class="my-image" id="image-1"></div>
   <div class="my-image" id="image-2"></div>
</div>


<script>
  function displayNextImage() {
    $("#image-" + x).css('backgroundImage',  images[x]).show('slow');
    x++;
  }

  var images = [],
  x = 0;
  images[0] = "url('images/snow.jpeg')";
  images[1] = "url('images/nike.jpeg')";
  images[2] = "url('images/motor.jpeg')";
</script>

您必须将此代码添加到css：

.my-image{
  display:none;
}

如果您不使用display: block元素:您的CSS将是：

.my-image{
  display:whatYouWant;
}

然后需要添加文档ready()函数并将show()更改为fadeIn()

$(document).ready(function(){
    $(".my-image").hide();
  });

  function displayNextImage() {
    $("#image-" + x).css('backgroundImage',  images[x]).fadeIn('slow');
    x++;
  }

这将会起作用，因为fadeIn()设置为显示前一个值。

如果您希望在添加图像之前displayNextImage()可见，请删除$(document).ready()调用并编辑div

function displayNextImage() {
  $("#image-" + x).hide().css('backgroundImage',  images[x]).fadeIn('slow');
  x++;
}

Answer 2

对于每个周期，您可以使用CSS动画完成此操作：

1)交换图像源，就像你已经在做的那样

2)重置动画中的淡入淡出，more info here

3)增加你的索引

​

const imgs = [
  'https://source.unsplash.com/iMdsjoiftZo/100x100',
  'https://source.unsplash.com/ifhgv-c6QiY/100x100',
  'https://source.unsplash.com/w5e288LU8SU/100x100'
];

let index = 0;

const oldImage1 = document.getElementById('oldImage1');
const newImage1 = document.getElementById('newImage1');
const oldImage2 = document.getElementById('oldImage2');
const newImage2 = document.getElementById('newImage2');

window.setInterval(() => {
  // put new image in old image
  oldImage1.src = newImage1.src;
  oldImage2.src = newImage2.src;
  
  // Set new image
  newImage1.src = imgs[index];
  newImage2.src = imgs[index];
  
  // reset animation
  newImage1.style.animation = 'none';
  newImage1.offsetHeight; /* trigger reflow */
  newImage1.style.animation = null; 
  newImage2.style.animation = 'none';
  newImage2.offsetHeight; /* trigger reflow */
  newImage2.style.animation = null; 
  
  // increment x
  index = index + 1 >= imgs.length ? 0 : index + 1;
}, 1500);

.parent {
  position: relative;
  top: 0;
  left: 0;
  float: left;
}

.oldImage1 {
  position: relative;
  top: 0;
  left: 0;
}

.newImage1 {
  position: absolute;
  top: 0;
  left: 0;
}

.oldImage2 {
  position: relative;
  top: 0;
  left: 100;
}

.newImage2 {
  position: absolute;
  top: 0;
  left: 100;
}

.fade-in {
  animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

<div class="parent">
  <img id="oldImage1" class="oldImage1" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
  <img id="newImage1" class="newImage1 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>
<div class="parent">
  <img id="oldImage2" class="oldImage2" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
  <img id="newImage2" class="newImage2 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>

​