Question

我正在我的网站中实现以下脚本。 https://www.jqueryscript.net/slideshow/Simple-Responsive-Background-Image-Cycler-With-jQuery.html

但是，当访问该站点时，图像会在一秒钟内可见（它们闪过）。这很奇怪，因为（的创建者）代码说容器是隐藏的，直到加载所有图像为止。

顺便说一句，在原始代码＃background-cycler中，z索引为-1。我必须将其更改为1，否则整个内容是不可见的（可能在body或其他内容之后。

function cycleImages(){
  var $active = $('#background_cycler .active');
  var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler .img:first');
  $next.css('z-index',2);//move the next image up the pile
  $active.fadeOut(1000,function(){//fade out the top image
    $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
    $next.css('z-index',3).addClass('active');//make the next image the top one
  });
}

$(window).load(function(){
  $('#background_cycler').css('visibility','visible');
  $('#background_cycler').fadeIn(1000);//fade the background back in once all the images are loaded
  // run every 5s
  setInterval('cycleImages()', 5000);
})

#background_cycler {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  visibility:hidden;
display:none;
}

#background_cycler .img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#background_cycler .img.active { z-index: 3; }

<!DOCTYPE html>
<html>
<head>
	<title>Background Image Cycler Demo</title>

	<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>


<div id="background_cycler" >
	<script type="text/javascript">
		$('#background_cycler').hide(); //hide the background while the images load, ready to fade in later
	</script>

	<div class="img active" style="background:url('https://unsplash.it/1920/1200?image=1074') top left no-repeat; background-size:cover;"></div>
	<div class="img" style="background:url('https://unsplash.it/1920/1200?image=1072') top left no-repeat; background-size:cover;"></div>
	<div class="img" style="background:url('https://unsplash.it/1920/1200?image=1071') top left no-repeat; background-size:cover;"></div>
	<div class="img" style="background:url('https://unsplash.it/1920/1200?image=1070') top left no-repeat; background-size:cover;"></div>
</div>

</body>
</html>

jQuery图像滑块/推子不久就显示所有图像

0 个答案: