鍍金池/ 問(wèn)答/HTML/ 使用jQuery做了一個(gè)輪播圖,但是在圖片的切換中會(huì)出現(xiàn)閃爍情況,該如何解決?

使用jQuery做了一個(gè)輪播圖,但是在圖片的切換中會(huì)出現(xiàn)閃爍情況,該如何解決?

使用jQuery的fadeIn和fadeOut 兩個(gè)方法做輪播效果,每當(dāng)切換的時(shí)候都會(huì)閃一下白色(容器的背景色),后來(lái)我將容器的背景色變?yōu)楹谏?,在firefox和chrome中不太容易看出來(lái),但是在IE中卻依然會(huì)閃爍(此時(shí)不是白色的)。該如何解決呢?是不是我js代碼寫(xiě)的有問(wèn)題呢?

(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");// 將所有的狀態(tài)回復(fù) 不然會(huì)有問(wèn)題: 點(diǎn)擊后面的再點(diǎn)擊前面的圖片不改變。
        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)
    }
})();
回答
編輯回答
命于你

jquery版本的問(wèn)題,選用了1.7.2版本就可以了。

2018年3月21日 02:46
編輯回答
純妹

一般做大眾化的效果做好用插件做,
而且這些代碼都是經(jīng)過(guò)考驗(yàn)的

2018年8月1日 05:35