javascript - jquery 背景图像切换器

Question

HTML

<aside> 
 // Floats to the right
</aside> 
<div class="backimage" > 
</div> 

查询

$(document).ready(function(){
 var i = 0;
 var total = $('#total').val();
 var image = $('.backimage');
 var images = [];
 for(i = 0; i<total; i++)
 {
  images[i] = $('#image'+i+'').val();
 }
 image.css('background-image', 'url('+images[images.length-1]+')');
 image.css('background-size', '930px 500px');
 image.css('background-repeat', 'no-repeat');
 setInterval(function(){
 image.fadeOut(1000, function(){
  image.css('background-image', 'url('+images[i++]+')');
  image.fadeIn(1000);
 });
 if(i == images.length)
   i = 0;
 }, 5000);

 });

假设是一个简单的背景图像切换器，但问题是当背景图像淡入时，背景图像 div 出现在 float 的前面，然后再转到它后面 可能可以使用 img 标签来完成，但感觉这会使加载时间变慢，在考虑替代方案之前确实需要帮助

Answer 1

理想情况下需要一个 jsfiddle 来查看问题，但我的猜测是您只需要在背景图像之外放置一个 div，并为其设置宽度和高度。

当jquery的淡出到0时，显示样式设置为none。我猜这是您的布局中断的时候。