1

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

CSS W/JQUERY 转换-

.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>
4

1 回答 1

0

不幸的是，我无法直接回答您的问题，但我想让您知道我使用的是 Google Chrome，并且我没有看到您网站上的闪烁。我看到从一个图像到下一个图像的平滑过渡。

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

这是来自浏览器的版本字符串：版本 29.0.1547.57 m 我在 Windows 7 上运行

于 2013-08-22T19:42:05.903 回答