动画图像滑块在Chrome中闪烁
Animated Image Slider is flickering in Chrome
我有一个图像滑块,在前一个图像滑动到下一个图像后,它会闪烁。出于某种原因,它只在谷歌Chrome中这样做。滑块设置是一个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>
很遗憾,我没有直接回答你的问题,但我想让你知道我使用的是谷歌浏览器,我看不到你网站上的闪烁。我看到了从一个图像到下一个图像的平滑过渡。
有没有可能你安装了一个以某种方式干扰的扩展?
以下是浏览器的版本字符串:版本29.0.1547.57 m我在Windows 7 上运行
相关文章:
- Chrome WebKitGetUserMedia
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- 在chrome.tabs.onCreated之后加载HTML页面
- chrome扩展中的navigator.geolocation.getCurrentPosition
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- .scroll()函数在上次更新后在谷歌chrome中定位闪烁
- CKEditor光标在Chrome中的焦点上不闪烁
- 下拉菜单在滑块上闪烁,仅在 Android 版 Chrome 上
- 如何使 Chrome 扩展程序的窗口在任务栏中闪烁
- 使用Jquery插件使标题栏闪烁得更快,Interval在Chrome中不起作用
- 2D纹理渲染在Safari中闪烁,在Chrome / Firefox中很好
- 动画图像滑块在Chrome中闪烁
- Chrome jquery php中的setInterval导致的DIV闪烁
- 使用JavaScript用图像和文本更新页面后,iPad上的Chrome浏览器中的网站闪烁/闪烁
- jQuery ScrollTo &Chrome:内容闪烁
- 在Chrome扩展CSS注入期间闪烁
- 最新版Chrome浏览器出现奇怪的闪烁错误
- Firefox在动画结束时从DOM中删除元素时会闪烁,而在Chrome中则可以正常工作
- 为什么我的工具提示在Firefox中闪烁而不是Chrome ?
- 在网站右侧的chrome浏览器中,每隔几秒钟就会有一个盒子闪烁