輪播圖的切換之間有短暫白色間隔

HTML：
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../csstexting/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="../csstexting/css.js"></script>
<link rel="stylesheet" type="text/css" href="../csstexting/css.css">

</head>
<body>

<header class="head" style="height: 30px;background: #FFE4C4;
width: 100%"></header>
<div class="wrap">
    <div class="wrap_div">
           <div class="wrap_div_one"></div>
           <div class="wrap_div_two"></div>
           <div class="wrap_div_three"></div>
           <div class="wrap_div_four"></div>
    </div>
</div>

</body>
</html>
css：
*{

padding: 0;
margin: 0;
list-style: none;

}
.wrap{

position: relative;
width: 500px;
height: 500px;
margin: 10px auto;
overflow: hidden;

}
.wrap_div{

position: absolute;
left: 0px;
width: 2000px;
height: 500px;

}
.wrap_div div{

float: left;
width: 500px;
height: 500px;
position: relative;
transition: opacity 500ms ease-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: 500px 500px;
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: 500px 500px;

}
.wrap_div_three{

background: url(https://img1.360buyimg.com/da/jfs/t17290/105/25936701/79615/ceb9025a/5a5830edNb29eb37c.jpg)no-repeat;
background-size: 500px 500px;

}
.wrap_div_four{

background: url(https://m.360buyimg.com/babel/jfs/t13342/35/2396024346/99047/e45736fb/5a56bf6eN8cc15233.jpg)no-repeat;
background-size: 500px 500px;

}
js：
$(document).ready(function(){

var val = 0;
var timer;
function move(){
    $('.wrap_div div').css({opacity:0,zIndex:0});
    
    val++;
      
      if(val > 3){
          val = 1;
          $('.wrap_div').css({left : 0});
      }
    $('.wrap_div div').eq(val).css({opacity:1,zIndex:1});

    $('.wrap_div').css({left : val*500*-1});

    timer = setTimeout(move,6000)
}
setTimeout(move,3000)

})

這是我寫的一個(gè)簡(jiǎn)單的仿照京東主頁(yè)上面的輪播圖。請(qǐng)問(wèn)為什么輪播圖切換之間會(huì)先變白。然后再切換 請(qǐng)問(wèn)怎么解決這個(gè)問(wèn)題！謝謝！

更改后：
$(document).ready(function(){


var val = 0;
var timer;
function move(){
    $('.wrap_div div').css({opacity:0,zIndex:0});
    
    val++;
      
      if(val > 3){
          val = 1;
          $('.wrap_div').css({left : 0});
      }
    $('.wrap_div div').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: 10px auto;
overflow: hidden;

}
.wrap_div{

left: 0px;
width: 2000px;
height: 500px;

}
.wrap_div div{

float: left;
width: 500px;
height: 500px;
position: relative;
transition: opacity 500ms ease-in-out;

}
.wrap_div_one{

background: url(https://m.360buyimg.com/babel/jfs/t13342/35/2396024346/99047/e45736fb/5a56bf6eN8cc15233.jpg)no-repeat;
background-size: 500px 500px;
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: 500px 500px;
left: -500px;

}
.wrap_div_three{

background: url(https://img1.360buyimg.com/da/jfs/t17290/105/25936701/79615/ceb9025a/5a5830edNb29eb37c.jpg)no-repeat;
background-size: 500px 500px;
left: -1000px;

}
.wrap_div_four{

background: url(https://m.360buyimg.com/babel/jfs/t13342/35/2396024346/99047/e45736fb/5a56bf6eN8cc15233.jpg)no-repeat;
background-size: 500px 500px;
left: -1500px;

}
代碼我稍微更改了下?，F(xiàn)在沒有空白了?？墒且婚_始第一張圖切換到第二張圖的時(shí)候沒有過(guò)度了。之后才有過(guò)度。。這個(gè)是哪里出了問(wèn)題。。

回答

編輯回答

陌上花

你原來(lái)的第一張圖切換無(wú)緩沖，應(yīng)該與第一次需要隱藏全部圖片有關(guān)系，因?yàn)楹竺嬷灰[藏當(dāng)前的那張就可以了，所以要么，
第一張圖就直接不切換

  .wrap_div_one {
/*opacity: 0;
        z-index: 1; 這兩個(gè)注釋掉*/
    }
    
 $(document).ready(function() {
     var val = -1;//改成 -1

要么，一開始就全部隱藏，只留第一張，就是這樣：

    .wrap_div div {

        float: left;
        width: 500px;
        height: 500px;
        position: relative;
        transition: opacity 500ms ease-in-out;
        opacity: 0;/*新加*/
    }

    .wrap_div .wrap_div_one {/*類名修改*/

        background: url(https://m.360buyimg.com/babel/jfs/t13342/35/2396024346/99047/e45736fb/5a56bf6eN8cc15233.jpg)no-repeat;
        background-size: 500px 500px;
        left: 0;
        opacity: 1;
        z-index: 1
    }

（注意你的CSS寫的有問(wèn)題，.wrap_div div 的優(yōu)先級(jí)高于 .wrap_div_one，即使后者寫在后面，如果想要后者優(yōu)先級(jí)高，覆蓋前者，要 .wrap_div .wrap_div_one，css樣式的權(quán)重優(yōu)先級(jí)你需要去搞清楚下）

2018年7月15日 08:29

編輯回答