jQuery的滑块不平稳过渡

感谢Christiaan Scheermeijer我得到了正确转换的滑块。但现在看来，图像的焦点已关闭。我是否需要使用z-index或某些东西来使幻灯片正常平滑？目前唯一一个“淡入淡出”的应该是幻灯片4，转换回幻灯片1.我真的很困惑。我尝试了淡入淡出的时间，这似乎不成问题。看起来“下一张幻灯片”只是在幻灯片的前景中突然显现出来，它应该从中消失。jQuery的滑块不平稳过渡

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

来源

2013-04-27 WASasquatch

如果将'fadeTo'定时器从'100'更改为'1000'会怎么样？或者在两者上都使用'1200'？或者，也许我只是没有正确理解你的问题。 – jsalonen 2013-04-27 22:28:16

请试试这个。

变化：

$(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，并删除slidesvar - 这可能有意义的原因是，如果您决定在将来添加或删除幻灯片，则不必记住也要更新slides计数 - 它只会与您在ids中指定的很多阵列。

考虑这个JSFiddle。

来源

2013-04-27 22:40:35

谢谢，我试了1200，它只是显示其他淡入，而它正在消失。真奇怪。并感谢代码的调整。 – WASasquatch 2013-04-27 23:01:33

@WASasquatch我做了一个编辑来减缓过渡，所以它会完成淡出，然后淡入下一个。我还添加了黑色背景色，因此一旦淡出就不会出现“白色闪光灯”。我还从这些变化中分出了一个新的JSFiddle。 – 2013-04-27 23:07:36

jQuery的滑块不平稳过渡

回答

相关问题