带有背景图像的 JQuery 交叉淡入淡出图像

Posted 2023-02-25

【中文标题】带有背景图像的 JQuery 交叉淡入淡出图像

【英文标题】：JQuery Crossfading Images with background img

【发布时间】：2018-11-02 22:12:26

【问题描述】：

我在尝试交叉淡化带有图像的幻灯片时遇到了一些麻烦。 这些图像由 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();
  

【参考方案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>

【讨论】：

该代码在幻灯片放映结束时产生了“空白”。我认为计数器超出了数组长度。对我来说，将 update_counter() 更改为以下内容： const update_counter = function() current_image++; if(current_image === images.length) current_image = 0;