Question

我之前问过你们我的自定义幻灯片代码，你帮了我很多，这次我遇到了不同的问题。请指出正确的方向。

这是一段代码：

var currentImage = 0;
var images = ['Aerodynamics.jpg','ABC_news.jpg','yep.jpg'];
function slideSwitch() {
    var newImage = 'url(images/'+images[currentImage]+')';
    $('.inner_img').css('background-image',newImage).animate({'opacity':1.0},4000);
    $('.inner_img').doTimeout(10000,function(){
        $(this).animate({'opacity':0.0},4000,function(){
            if (currentImage != images.length-1){
                currentImage++;
            }else{
                currentImage = 0;
            };
        });
    });
};
function interval(){
    setInterval(slideSwitch,4000);
};
interval();

这是我的想法：首先加载具有0容量的图像＃1，然后将其设置为满容量动画，然后使用.doTimeout（）延迟plagin函数将其设置回0容量，该功能运行良好，当动画到0容量完成时，回调函数假设要改变currentImage值因此当interval（）再次触发slideSwitch（）时，它将拥有容量为0的新图像，并且循环继续。

它的作用：第一个循环工作得很好，就像我想要的那样，第二个循环从第一个循环加载0个容量的图像，然后忽略所有动画，突然第二个图像出现没有动画，然后动画发生，WTF？请帮帮忙，我几天都在试着想出来。谢谢......

Answer 1

据我所知，你有重叠超时。一旦您的间隔完成调用slideSwitch，它将等待4秒再次触发它。但是一旦slideSwitch启动，它会动画一段时间4秒钟，然后等待10秒钟开始另一个需要4秒钟的动画，最后它会改变图像。这意味着当slideSwitch第一次完成时，setInterval已经触发了~4次！

尝试使用setTimeout的代码。你可能需要在这里和那里修复一些延迟。

var currentImage = 0;
var images = ['Aerodynamics.jpg','ABC_news.jpg','yep.jpg'];
function slideSwitch() {
    var newImage = 'url(images/'+images[currentImage]+')';
    $('.inner_img').css('background-image',newImage).animate({'opacity':1.0},4000);
    $('.inner_img').doTimeout(10000,function(){
        $(this).animate({'opacity':0.0},4000,function(){
            if (currentImage != images.length-1){
                currentImage++;
            }else{
                currentImage = 0;
            };
            setTimeout(slideSwitch,4000);
        });
    });
};

slideSwitch();

照片幻灯片问题

1 个答案: