我需要一个简单的三张幻灯片 slider ,所以我没有使用 jQ 插件,而是自己编写了代码。该代码有效,但动画发生在 2-3 帧而不是超过 20 帧,除非在 IE6 和 IE7 中它在 20-30 帧中完美地动画。在所有其他浏览器(IE8、Firefox、Chrome、Safari、Opera)中,它的动画效果看起来就像电脑挂着一样。如果有人知道为什么会这样,请告诉我。我不想使用笨重的插件然后也对其进行样式设置。
HTML:
<div class="fl-left" id="slide-box">
<div class="slide" id="slide-1">
<img src="images/slider/1.jpg" alt="The Image Description" />
<p class="slide-text">"The Description About The Image/Slide"</p>
</div>
<div class="slide" id="slide-2">
<img src="images/slider/1.jpg" alt="The Image Description" />
<p class="slide-text">"The Description About The Image/Slide"</p>
</div>
<div class="slide" id="slide-3">
<img src="images/slider/1.jpg" alt="The Image Description" />
<p class="slide-text">"The Description About The Image/Slide"</p>
</div>
</div>
CSS:
#slide-box{
position:relative;
width:472px;
height:192px;
border-bottom:3px solid #fff;
overflow:hidden;
}
.slide{ position:absolute;
float:left; width:455px;
overflow:hidden;
border:1px solid #000;
margin:8px 8px 0 8px;
}
.slide img{ float:left; }
.slide-text{ display:block;
width: 140px;
height:132px;
background:#ecefdc;
float:left;
padding: 10px 0px;
}
#slide-1 { left:0px; }
#slide-2 { left:467px; }
#slide-3 { left:934px; }
jQuery:
$('#slide-but-1').click(function(){
$('#slide-1').animate({"left": "0px"}, "slow");
$('#slide-2').animate({"left": "467px"}, "slow");
$('#slide-3').animate({"left": "934px"}, "slow");
});
$('#slide-but-2').click(function(){
$('#slide-1').animate({"left": "-467px"}, "slow");
$('#slide-2').animate({"left": "0px"}, "slow");
$('#slide-3').animate({"left": "467px"}, "slow");
});
$('#slide-but-3').click(function(){
$('#slide-1').animate({"left": "-934px"}, "slow");
$('#slide-2').animate({"left": "-467px"}, "slow");
$('#slide-3').animate({"left": "0px"}, "slow");
});
最佳答案
我怀疑问题出在幻灯片的样式上,即 float: left
- 这是多余的,因为您使用了绝对定位。
此外,如果您有一个额外的幻灯片容器,您可以获得更好的性能,如下所示:
<div class="fl-left" id="slide-box">
<div id="slide-container">
<div class="slide" />
<div class="slide" />
<div class="slide" />
</div>
</div>
这样你就可以只为容器设置动画,$('#slide-container').animate({ left: 0 }, "slow");
- 生成的代码会更清晰.
关于jquery - jQuery 动画功能有问题吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1438399/