Question

我在尝试用图像淡化幻灯片时遇到一些麻烦。这些图像通过background-img属性显示。

当我使用.fadeOut（）和.fadeIn（）函数时，在显示下一张图像之前，该图像首先淡入淡出。

我尝试使用.load（）函数解决此问题，但这似乎没有用。

这是我的代码：

mySlider.js：

var slides = [
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider13.png"
  },
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider10.jpg"
  },
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider9.jpg"
  },
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider3.jpg"
  },
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider4.png"
  },
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider2.png"
  },
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider11.jpg"
  },
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider12.jpg"
  },
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider1.png"
  },
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider5.jpg"
  },
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider7.jpg"
  },
  {
    url: "#",
    src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider8.jpg"
  }
]

myScript.js：

const initiateSlider =()=> {
  console.log("initiateSlider");

  $("#mySlider").css('background-image', 'url(' + slides[0].src + ')');
  $("#mySlider").data('sld','0');
  setTimeout(nextSlide, 5000); // voert nextSlide 1x uit na x seconden

}

const nextSlide =()=> {
  console.log("nextSlide");

  let currentSlide = $("#mySlider").data('sld');

  $("#mySlider").data('sld', parseInt(currentSlide) + 1);
  let newSlideIndex = $("#mySlider").data('sld');

  console.log(newSlideIndex);

  if(newSlideIndex < slides.length)
  {
      $("#mySlider").css('background-image', 'url(' + slides[newSlideIndex].src + ')');
      setTimeout(nextSlide, 5000);
  }
  else {
    initiateSlider();
  }
}

Answer 1

正如您所说，主要问题是当图像淡出时，其背后没有任何东西。您需要将下一张图像放置在第一张图像的下方，这样，当第一张图像淡出时，您就可以慢慢看到其后的图像。然后，在淡出完成后，将该图像移至该行的后面。

因此，在此示例中，我要做的是将两个div恰好位于彼此的顶部。这是通过position: absolute;完成的。然后我淡出最上面的一个，以便显示最下面的一个，然后将最上面的一个移到最下面，更改其图像，并重置其样式。此时，另一幅图像位于最上方，我只是淡出了那幅图像。

JS Fiddle Demo

<style>
.frame {
  border: 2px solid grey; 
  position: relative; 
  height: 400px; 
  width: 400px; 
}
.image {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-size: cover; 
  background-position: center;
  z-index: 1; 
}
.image:nth-child(1) {
  z-index: 2; 
}
</style>

<div class="frame">
  <div class="image"></div>
  <div class="image"></div>
</div>

<script>
  let current_image = 0; 
  const images = [
    'https://picsum.photos/200/300?image=0',
    'https://picsum.photos/200/300?image=1',
    'https://picsum.photos/200/300?image=2',
    'https://picsum.photos/200/300?image=3',
    'https://picsum.photos/200/300?image=4',
    'https://picsum.photos/200/300?image=5',
    'https://picsum.photos/200/300?image=6',
  ];


  // keep track of current image
  // increment by one
  // if at end of array, start over
  const update_counter = function(){
    if (images[current_image] === undefined){
      current_image = 0; 
    } else {
      current_image += 1; 
    }

  }


  // get first image
  // fade it out
  // move it under the newly visible image
  // update it's src to be new image
  // remove it's style tag (which was applied by fadeOut() ) so it can be visible
  // update current_image counter
  const transition_images = () => {
    const top_image = $('.image:nth-child(1)');
    const bottom_image = $('.image:nth-child(2)');
    const new_image = images[ current_image ];

    top_image.fadeOut(2000, function(){
      top_image.insertAfter(bottom_image);
      top_image.removeAttr('style');
      top_image.css('background-image', 'url('+ new_image +')');
      update_counter(); 
    });  
  }



  // set up initial images
  // get all .image elements and assign them an image attr
  // each time one is assigned, update the current_image counter
  $('.image').each(function(){
    const new_image = images[ current_image ];
    $(this).css('background-image', 'url('+ new_image +')');
    update_counter(); 
  });

  // set timer in motion
  const time = 2500; 
  setInterval(transition_images, time)
</script>

jQuery带有背景img的淡入淡出图像

1 个答案: