极客观点
项目管理
HarmonyOS
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)})
这是我写的一个简单的仿照京东主页上面的轮播图。请问为什么轮播图切换之间会先变白。然后再切换 请问怎么解决这个问题！谢谢！更改后：
$(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;}
代码我稍微更改了下。现在没有空白了。可是一开始第一张图切换到第二张图的时候没有过度了。之后才有过度。。这个是哪里出了问题。。
因为你在切换下一张图片的时候，第一张直接超出显示区域，而这时第二张opacity要从0变成1，所以会有空白期。刚才看了下京东，京东上的每一张图片都是有left的，也就是在第二张图显示的时候第一张是停留在原地的。