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()设置为显示先前的值。

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

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>

在图片开关上使用JavaScript淡化背景图片

2 个答案: