猿问

轮播图的切换之间有短暂白色间隔

HTML：
Document
width:100%">
css：*{
padding:0;
margin:0;
list-style:none;
}.wrap{
position:relative;
width:500px;
height:500px;
margin:10pxauto;
overflow:hidden;
}.wrap_div{
position:absolute;
left:0px;
width:2000px;
height:500px;
}.wrap_divdiv{
float:left;
width:500px;
height:500px;
position:relative;
transition:opacity500msease-in-out;
opacity:0.1;
z-index:0
}.wrap_div_one{
background:url(https://m.360buyimg.com/babel/jfs/t13342/35/2396024346/99047/e45736fb/5a56bf6eN8cc15233.jpg)no-repeat;
background-size:500px500px;
opacity:1!important;
z-index:1!important;
}.wrap_div_two{
background:url(https://m.360buyimg.com/babel/jfs/t16165/207/1607854073/57122/3438f9c5/5a5ece4fN9efbf994.jpg)no-repeat;
background-size:500px500px;
}.wrap_div_three{
background:url(https://img1.360buyimg.com/da/jfs/t17290/105/25936701/79615/ceb9025a/5a5830edNb29eb37c.jpg)no-repeat;
background-size:500px500px;
}.wrap_div_four{
background:url(https://m.360buyimg.com/babel/jfs/t13342/35/2396024346/99047/e45736fb/5a56bf6eN8cc15233.jpg)no-repeat;
background-size:500px500px;
}js：$(document).ready(function(){
varval=0;
vartimer;
functionmove(){
$('.wrap_divdiv').css({opacity:0,zIndex:0});
val++;
if(val>3){
val=1;
$('.wrap_div').css({left:0});
}
$('.wrap_divdiv').eq(val).css({opacity:1,zIndex:1});
$('.wrap_div').css({left:val*500*-1});
timer=setTimeout(move,6000)
}
setTimeout(move,3000)
})
这是我写的一个简单的仿照京东主页上面的轮播图。请问为什么轮播图切换之间会先变白。然后再切换请问怎么解决这个问题！谢谢！
更改后：$(document).ready(function(){
varval=0;
vartimer;
functionmove(){
$('.wrap_divdiv').css({opacity:0,zIndex:0});
val++;
if(val>3){
val=1;
$('.wrap_div').css({left:0});
}
$('.wrap_divdiv').eq(val).css({opacity:1,zIndex:1});
//$('.wrap_div').css({left:val*500*-1});
timer=setTimeout(move,6000)
}
setTimeout(move,3000)
})
css：
.wrap{
width:500px;
height:500px;
margin:10pxauto;
overflow:hidden;
}.wrap_div{
left:0px;
width:2000px;
height:500px;
}.wrap_divdiv{
float:left;
width:500px;
height:500px;
position:relative;
transition:opacity500msease-in-out;
}.wrap_div_one{
background:url(https://m.360buyimg.com/babel/jfs/t13342/35/2396024346/99047/e45736fb/5a56bf6eN8cc15233.jpg)no-repeat;
background-size:500px500px;
left:0;
opacity:1;
z-index:1
}.wrap_div_two{
background:url(https://m.360buyimg.com/babel/jfs/t16165/207/1607854073/57122/3438f9c5/5a5ece4fN9efbf994.jpg)no-repeat;
background-size:500px500px;
left:-500px;
}.wrap_div_three{
background:url(https://img1.360buyimg.com/da/jfs/t17290/105/25936701/79615/ceb9025a/5a5830edNb29eb37c.jpg)no-repeat;
background-size:500px500px;
left:-1000px;
}.wrap_div_four{
background:url(https://m.360buyimg.com/babel/jfs/t13342/35/2396024346/99047/e45736fb/5a56bf6eN8cc15233.jpg)no-repeat;
background-size:500px500px;
left:-1500px;
}代码我稍微更改了下。现在没有空白了。可是一开始第一张图切换到第二张图的时候没有过度了。之后才有过度。。这个是哪里出了问题。。

		

			
隔江千里

			
浏览 1237回答 1

		

	
	

									
	

	

		
1回答

		

			
		

	

	

		随时随地看视频慕课网APP
	

	
	
	

		
相关分类

		

			
			

			
				 JavaScript
			
			

				
			
		

	

	
	
	

		我要回答