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

1）制作一个div

2）将其设置为/ 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); ...

的〜＆GT;代码......解释

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

<强>动画

要设置动画的CSS属性
动画时长
动画完成时将调用的函数。

<强> CSS

＆＃39;背景图像＆＃39;是css属性，imgurl是它的价值。即＆＃39; ../ img / hello.png＆＃39;

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

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

的〜＆GT;换句话说

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

的〜＆GT;如果您愿意，也可以这样做。

 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

Answer 2

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

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

现在我们进入语言的异步性质。正是因为所有命令都将在迭代结束后执行，变量i将具有值10.因此所有setTimeout都将执行：

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

这就是为什么这段代码不起作用的原因。我相信TheOtherGuy提出的jQuery动画是一个很好的解决方案，虽然我会考虑使用更顺畅的css3过渡。看看这里：http://www.w3schools.com/css3/css3_transitions.asp

带淡入淡出的JavaScript图像滑块

2 个答案: