带有淡入淡出的 JavaScript 图像滑块

Question

所以，我一直在尝试为我的网站制作幻灯片。我的幻灯片工作正常，但后来我决定通过分别在图像更改前后缓慢上下改变不透明度来在图像之间添加一些淡入淡出。我一遍又一遍地阅读了他的代码，虽然下面代码中的逻辑有点难以理解，但据我所知，它应该工作得非常顺利。我正在使用 for 循环为每个单独的不透明度更改生成 setTimeout 语句。

//Shortcut for getElementById()
function e(eel) {
    return document.getElementById(eel);
}

//Slideshow
window.slideShow();

function slideShow(){
    var a = setTimeout(loopChange,8000);
    var b = setTimeout(function(){changeSrcTo("Other/noctis.jpg")},10000);
    var c = setTimeout(loopChange,18000);
    var d = setTimeout(function(){changeSrcTo("Other/retriever.jpg")},20000);
    var e = setTimeout(loopChange,28000);
    var f = setTimeout(function(){changeSrcTo("Other/miningop2.jpg")},30000);
    var g = setTimeout(slideShow,30000);
}
function changeSrcTo(thisSrc){
    e('dynimg').src=thisSrc;
}
function loopChange(){
    for(i=0;i<=10;i++){
        var t = setTimeout(function(){changeOpacity((1-(i*0.02)))},(i*200));
    }
    for(i=0;i<=20;i++){
        var u = setTimeout(function(){changeOpacity((0.6+(i*0.02)))},((i*200)+2000));
    }
}
function changeOpacity(oValue){
    e('dynimg').style.opacity=oValue;
    e('dynimg').style.filter="alpha("+(oValue*100)+")"; 
}

我向你们倾倒代码深表歉意，但我真的不知道还能问谁。我希望我可怕的代码不会太混乱。从本质上讲，它真的很跳跃，只是在 img 变化前一秒褪色，并没有褪色。下一张图片并没有淡入，它只是在改变并以 1.0 的不透明度显示。

Answer 1

setTimeout 不是你需要的。首先你必须知道 setTimeout 函数并不总是精确的。 在您的代码上，问题与 javascript 的单线程、非阻塞性质有关。当你进入 loopChange 函数的循环时，真正发生的是：

执行来到循环部分。变量 i 被实例化为值为 0。循环运行 10 次。在所有这些时间里，每个“setTimeout”调用都会告诉 javascript“我知道你只能运行一个线程。所以，当你完成你正在做的事情时，在 i*200 毫秒后改变不透明度”。虽然，javascript 正在做的是迭代！因此，当迭代结束时，所有这些排队的命令都将执行。

现在我们了解了该语言的异步特性。正是因为所有命令都将在迭代结束后执行，所以变量 i 的值为 10。所以所有的 setTimeout 都将执行：

changeOpacity((1-(10*0.02)))},(10*200)

这就是此代码不起作用的原因。我相信 TheOtherGuy 提出的 jQuery animate 是一个很好的解决方案，尽管我会考虑使用更平滑的 css3 过渡。看这里：http://www.w3schools.com/css3/css3_transitions.asp

Answer 2

1) 制作一个 div

2) 设置其 with/height 以匹配图像的尺寸

3) 使用这个

 function toggleImg(imgurl,effectDuration)
 {
     $('#DIV').animate( {opacity: 0}, effectDuration/2 , function(){
         $(this)
             .css( { 'background-image': 'url('+imgurl+')' } )
             .animate( {opacity: 1} , effectDuration/2 );
     });
 }
 //~ can't get any easier than that.

......:::::: A Big Friendly Button! ::::::......

既然你不能 animate( { backgroundImage: 'img.png',opacity:1 }, 500);

我们必须即兴发挥。

第 1 步。淡出
$('#DIV').animate({opacity: 0}, fadeDuration/2 , function(){ /*on completion*/});

第 2 步。更换图片
function(){ $(this).css({'background-image':'url('+imgurl+')'}) ...

第 2 步。淡入
... animate({opacity:1},fadeDuration/2); ...

~> 代码...解释

$('#div') 遵循与documentGetElementById('div') 完全相同的逻辑
但它允许您使用 JQueries 函数。

动画

1. 用于动画的 CSS 属性

2. 动画持续时间

3. 动画完成时调用的函数。

css

'background-image' 是 css 属性，imgurl 是它的值。即'../img/hello.png'

在 jquery 中你可以调用很多函数，因为它们中的大多数返回 $(this) 所以：

$('#mydiv').css().animate().toggle().css().animate() // ... etc ...

~> 换句话说

.animate( /* objects with their values */ , /* duration */ , /* callback function */ )
.css( /* objects with their values */ )

~>如果你愿意，你也可以这样做。

 function callMeWhenUrDone()
 {
       $('#mydiv').css( { 'background-image': 'url('+imgurl+')' } );
       $('#mydiv').animate( {opacity: 1} , effectDuration/2 );
 }

 function toggleImg(imgurl,effectDuration)
 {
     $('#mydiv').animate( {opacity: 0}, effectDuration/2 , callMeWhenUrDone );
 }
 //~ cheesy function