Question

感谢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);

Answer 1

请试一试。

变化：

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

要：

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

并添加到#container CSS规则：

background-color: #000;

此外，您也可以考虑这种变化（虽然没有必要让它工作 - 它会简化您的代码）。

变化：

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

要：

slide = nextSlide;

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

另一个建议是考虑在ids.length使用slides，并删除slides var - 如果你决定这可能是有道理的要在将来添加或删除幻灯片，您不必记住同时更新slides计数 - 它只会与您在ids数组中指定的许多数据一起使用。

考虑这个JSFiddle。

jquery滑块没有过渡平滑

1 个答案: