0

我需要一个简单的三张幻灯片滑块，所以我没有使用 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">&quot;The Description About The Image/Slide&quot;</p>
</div>

<div class="slide" id="slide-2">
    <img src="images/slider/1.jpg" alt="The Image Description" />
    <p class="slide-text">&quot;The Description About The Image/Slide&quot;</p>
</div>

<div class="slide" id="slide-3">
    <img src="images/slider/1.jpg" alt="The Image Description" />
    <p class="slide-text">&quot;The Description About The Image/Slide&quot;</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");
});
4

2 回答 2

3

我怀疑问题在于幻灯片的样式，即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");并且生成的代码会更清晰。

于 2009-09-17T12:10:24.037 回答
0

该代码与我使用的 jQuery Drop Shadow 插件发生冲突。删除使动画平滑。

于 2009-09-17T12:50:47.493 回答