動畫圖像滑塊在Chrome中閃爍

我有一個圖像滑塊，在它滑動到下一個圖像後閃爍前一圖像RIGHT。出於某種原因，它只是在谷歌瀏覽器中做到這一點。滑塊設置是一個Div，三個獨立的圖像並排排列，它們的位置通過jquery過渡轉換，以便顯示不同的圖像。你可以在www.cutephilosophy.com上查看這個和閃爍。（滑塊通常處於自動運行狀態，但是我對此問題已關閉，只需單擊下一個或上一個按鈕即可看到閃爍）。動畫圖像滑塊在Chrome中閃爍

CSS W/JQUERY TRANSITION-

.slider{ 
    width: 960px; 
    height: 450px; 
    float:left; 
} 
p#slide1_controls { 
    text-align:center; 
} 
#slide1_controls span { 
    padding-right:2em; 
    cursor:pointer; 
} 
#slide1_container { 
    width:690px; 
    height:400px; 
    float: left; 
    overflow:hidden; 
    /*margin:0 auto;*/ 
} 
#slide1_images { 
    float:left; 
    width:2070px; 
    -webkit-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980); 
    -moz-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980); 
    -ms-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980); 
    -o-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980); 
    transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980); 
    /*-webkit-transition:all 2.0s easeInOutQuad; 
    -moz-transition:all 2.0s easeInOutQuad; 
    -o-transition:all 2.0s easeInOutQuad; 
    transition:all 2.0s easeInOutQuad;*/ 
} 
#slide1_images img { 
    padding:0; 
    margin:0; 
    float:left; 
} 
.slider{ 
    float:left; 
    width: 960px; 
    height: 400px; 
    overflow: hidden; 
    cursor:pointer; 
}

JAVASCRIPT（爲下一個/上/ autorunning功能/滑動） -

var $selectedSlide=1; 

//var autoSlider = setInterval(nextSlide, 5500); 

function nextSlide() { 
    if ($selectedSlide!=3) { 
     $("#slide1_images").css("transform","translateX("+-690 * ($selectedSlide)+"px)"); 
     $selectedSlide=$selectedSlide+1; 
     //window.alert("SelectedSlide = "+$selectedSlide); 
    } 
    else { 
     $("#slide1_images").css("transform","translateX(0px)"); 
     $selectedSlide=1; 
    } 
} 

function prevSlide() { 
    //clearInterval(autoSlider); 
    if($selectedSlide>1) { 
    $("#slide1_images").css("transform","translateX("+-690 * ($selectedSlide-2)+"px)"); 
    $selectedSlide=$selectedSlide-1; 
    } 
    else{ 
     $("#slide1_images").css("transform","translateX(-1380px)"); 
     $selectedSlide=3; 
    } 
}

HTML -

<div class="sliderPrev"> 
<img src="images/SliderImages/SliderPrevBtn.gif" onmouseover="this.src='images/SliderImages/SliderPrevBtnRollover.gif'"onmouseout="this.src='images/SliderImages/SliderPrevBtn.gif'" onClick="prevSlide();"/> 
</div> 
<div id="slide1_container" class="shadow" align="left"> 
    <div id="slide1_images" class="hover"> 
    <a href="BoldAndClassy.php" target="_blank"> <img src="images/SliderImages/SliderOne.jpg" class="noBorder"/></a> 
    <a href="http://www.fubbie.tumblr.com" target="_blank"><img src="images/SliderImages/SliderTwo.jpg" class="noBorder"/></a> 
    <a href="http://www.fubbie.tumblr.com" target="_blank"> <img src="images/SliderImages/SliderThree.jpg" class="noBorder"/></a> 
    </div> 
</div> 
<div class="sliderNext"> 
<img src="images/SliderImages/SliderNextBtn.gif" onmouseover="this.src='images/SliderImages/SliderNextBtnRollover.gif'"onmouseout="this.src='images/SliderImages/SliderNextBtn.gif'" onClick="nextSlide();"/> 
</div>

來源

2013-08-22 Josh Graef

不幸的是我不沒有直接回答你的問題，但我想讓你知道我使用谷歌瀏覽器，但我沒有看到在您的網站上閃爍。我看到從一幅圖像到下一幅圖像的平滑過渡。

是否有可能安裝了擴展程序，以某種方式干擾？

下面是來自瀏覽器的版本字符串：版本29.0.1547.57米我在Windows 7

來源

2013-08-22 19:42:05

運行我剛纔檢查，我已經安裝了零個擴展。過渡對我來說很順利（至少我認爲它是..），但我沒有對滑塊做任何改變，並且出於某種原因，它對我來說是閃爍的。我有一個Mac BTW，並且我們有相同版本的chrome除了最後沒有「m」？可能m只是將windows包與Chrome的mac包區分開來。 –

動畫圖像滑塊在Chrome中閃爍

回答

相關問題