Question

我目前正在尝试做一个图像“滑块”（我不会说滑块，不知道怎么用英语说（我德语：P））其中包括模糊效果和3个不同的图像。一切都很好，但动画。我已经检查了类似的问题，但我发现似乎没有任何工作。这是我的代码：

Jquery的

function wait(ms){
var start = new Date().getTime();
   var end = start;
   while(end < start + ms) {
     end = new Date().getTime();
  }
}    

var current = "bg_image_1.jpg";
var current_num = 1;

window.setInterval(function(){
    if(current == "bg_image_3.jpg"){
        $("#changing").css('filter', 'blur(5px)');
        wait(2000);
        $("#changing").attr('src', 'bg_image_1.jpg');
        $("#changing").css('filter', 'blur(0px)');
        current_num -= 2;
    } else {
        current_num += 1;
        current = current.slice(0, 8) +"_"+ current_num + ".jpg";
        $('#changing').css('filter', 'blur(5px)');
        wait(2000);
        $('#changing').attr('src', current);
        $('#changing').css('filter', 'blur(0px)');
    }
}, 10000);

CSS

#changing {
    filter: blur(0px);
    transition: blur 2s linear;
    -webkit-transition: blur 2s linear;
    -moz-transition: blur 2s linear;
}

HTML

<div id="bg_image_animated"><img id="changing" src="bg_image_1.jpg" height="800px" width="100%"/></div>

如果你们中的一些人知道错误的答案会很酷，我现在试着解决这个问题几个小时。任何帮助表示赞赏！

jquery图像模糊动画

0 个答案: