javascript - 在图像开关上使用 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() 设置为显示之前的值。

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

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