1

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

4

2 回答 2

1

1）制作一个div

2）设置它的高度/高度以匹配图像的尺寸

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
于 2013-07-10T20:23:05.383 回答
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

于 2013-07-10T21:45:17.223 回答