Question

我有一个图像滑块在滑动到下一个图像后闪烁前一个图像。出于某种原因，它只是在谷歌Chrome浏览器中这样做。滑块设置是一个Div，其中三个独立的图像并排放置，它们的位置通过jquery过渡进行转换，以便显示不同的图像。您可以在www.cutephilosophy.com上查看此内容和闪烁。（滑块通常处于自动运行状态，但我为此问题关闭了滑块，只需单击下一个或上一个按钮即可看到闪烁）。

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（下一个/上一个/自动运行/滑动的功能） -

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>

Answer 1

很遗憾，我没有直接回答您的问题，但我想告诉您我使用谷歌浏览器，而且我看不到您网站上的闪烁。我看到从一个图像到下一个图像的平滑过渡。

您是否可能安装了一个以某种方式干扰的扩展程序？

以下是浏览器中的版本字符串：版本29.0.1547.57 m 我在Windows 7上运行

动画图像滑块在Chrome中闪烁

1 个答案: