为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

隔江千里 2019-05-24 16:17:50
HTML:Documentcss:*{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;}代码我稍微更改了下。现在没有空白了。可是一开始第一张图切换到第二张图的时候没有过度了。之后才有过度。。这个是哪里出了问题。。
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 1236 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信