HTML轮播图白屏闪屏,使用jQuery做了一个轮播图,但是在图片的切换中会出现闪烁情况,该如何解决?...

使用jQuery的fadeIn和fadeOut 两个方法做轮播效果,每当切换的时候都会闪一下白色(容器的背景色),后来我将容器的背景色变为黑色后,在firefox和chrome中不太容易看出来,但是在IE中却依然会闪烁(此时不是白色的)。该如何解决呢?是不是我js代码写的有问题呢?

(function(){

var currentIndex=1;

var time = 5000;

var currentLength = $(".banner_item li").length;

var setInter;

setInter1 = setInterval(move,time);

jQuery.easing.def = "easeOutQuad";

$(".banner_bottom_chose li").not($(".banner_bottom_chose li").last()).not($(".banner_bottom_chose li").first()).on("click",function(){

clearInterval(setInter1);

$(".banner_item li").stop(false,true).fadeOut("slow");// 将所有的状态回复 不然会有问题: 点击后面的再点击前面的图片不改变。

currentIndex = $(this).index() > currentLength ? 1 : $(this).index()-1;

move();

setInter1 = setInterval(move,time);

});

function move(){

$(".background_blue,.banner_bottom_title").stop(false,true).animate({left:currentIndex*115+20},300);

$(".banner_item li").eq(currentIndex-1<0 ? currentLength-1 :currentIndex-1).stop(false,true).fadeOut(1000);

$(".banner_text").eq(currentIndex-1<0 ? currentLength-1 :currentIndex-1).stop(false,true).animate({top:"340px"},800);

$(".banner_img").eq(currentIndex-1<0 ? currentLength-1 :currentIndex-1).stop(false,true).animate({right:"120px"},800);

setTimeout(function(){

$(".banner_item li").eq(currentIndex).stop(false,true).fadeIn(600);

$(".banner_text").eq(currentIndex).children("h2").css({paddingTop:"50px",paddingBottom:"50px"}).stop(false,true).animate({paddingTop:"0",paddingBottom:"0"},800);

$(".banner_text").eq(currentIndex).css({top:"0",opacity:"0"}).stop(false,true).animate({top:"170px",opacity:"1"},800);

$(".banner_img").eq(currentIndex).css({right:"-50px",opacity:"0"}).stop(false,true).animate({right:"10px",opacity:"1"},800);

currentIndex++;

if(currentIndex == currentLength){

currentIndex = 0;

}

},200)

}

})();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值