1

感谢 Christiaan Scheermeijer，我让滑块正确过渡。但现在似乎图像的焦点已经关闭。我是否需要使用 z-index 或其他东西才能使幻灯片正确平滑？目前，唯一一个应该“消失”的幻灯片是幻灯片 4，过渡回幻灯片 1。我真的很困惑。我尝试了淡入淡出的时间，这似乎不是问题。似乎“下一张幻灯片”只是在它应该淡出的幻灯片上方突然出现在前景中。

http://jsfiddle.net/WASasquatch/haBAS/2/

$('#hi1').fadeTo("slow", 1.0);
var slide = 0,
slides = 4,
ids = [
    '#hi1',
    '#hi2',
    '#hi3',
    '#hi4', ];
slideShow = setInterval(function () {
    var nextSlide = slide + 1;
    if (nextSlide > slides - 1) {
        nextSlide = 0;
    }
    $(ids[nextSlide]).fadeTo(100, 1.0);
    $(ids[slide]).fadeTo(1200, 0);
    slide++;
    if (slide > slides - 1) {
        slide = 0;
    }
}, 5000);
4

1 回答 1

2

请试试这个。

改变：

$(ids[nextSlide]).fadeTo(100, 1.0);
$(ids[slide]).fadeTo(1200, 0);

至：

$(ids[slide]).fadeTo(300, 0);
$(ids[nextSlide]).fadeTo(2300, 1.0);

并添加到#containerCSS 规则：

background-color: #000;

此外，您也可能会考虑此更改（尽管没有必要让它工作 - 它会简化您的代码）。

改变：

slide++;
if (slide > slides - 1) {
    slide = 0;
}

至：

slide = nextSlide;

（您已经计算了下一张幻灯片的内容，您可以直接使用它，而不是重新计算然后检查边界。）

另一个建议是考虑使用ids.lengthwhere you haveslides并删除slides var- 这可能有意义的原因是，如果您决定在将来添加或删除幻灯片，您不必记住也更新slides计数 - 它无论您在ids数组中指定多少，都可以使用。

考虑这个JSFiddle。

于 2013-04-27T22:40:35.607 回答