使用 jquery 动态更改和动画背景图像

Question

我有以下代码。

    (function ($) {

        var i = 0;

        var header_banner = $(".destination-banner");
        var banners = ["bg1.png","bg2.png","bg3.png"];//<?php  //echo $slide_banners; ?>;

        header_banner.css('backgroundImage', 'url(<?php echo site_url(); ?>contents/images/home-slider/'+banners[0]+')');

        window.setInterval(function () {
            i = i == banners.length ? 0 : i;
            header_banner.animate({backgroundImage: 'url(<?php echo site_url(); ?>contents/images/home-slider/'+banners[i]+')'}, 3000);
            i++;
        }, 30);

    })(jQuery);

我试图使用 animate() 方法为 div.destination-banner 的背景图像制作动画。我可以使用相同的方法更改背景颜色。但是背景图片。需要使用 ajax 吗？

谢谢。

已编辑：

请找到我的 jsfiddle here。

Answer 1

无需使用 ajax 即可完成您的需要。这样做的原因是 ajax 实际上就是调用服务器获取数据然后重新加载这些数据，而无需重新加载页面。

如果你真的想为此使用 jQuery 动画，涉及的步骤是： 1) 将背景图像设置为不透明度：0 2) 然后将背景图像设置为新图像，然后 3) 将其设置为动画，如下面的代码所示：

$(document).ready(function() {
   (function ($) {

    var i = 0;

    var header_banner = $(".destination-banner");
    var banners = ["https://c1.staticflickr.com/9/8882/18535493118_ecdcc47918_b.jpg","http://www.fs.fed.us/wildflowers/ethnobotany/images/oils/mountain_monardella_lg.jpg"];

    header_banner.css('backgroundImage', 'url("'+banners[0]+'")');

        window.setInterval(function () {

           i = (i >= banners.length) ? 0 : i;

           //animate it to fade, then do a callback, after animation is done
           header_banner.animate({opacity: 0}, function(){

              //change the background image
              header_banner.css('backgroundImage','url("'+banners[i]+'")');

              //fade back in
              header_banner.animate({opacity: 1}, 3000);
              i++;
           });

        }, 30);
   })(jQuery);
});

您的代码首先无法运行的原因是 1) 您试图为 backgroundImage 设置动画，但您做不到。你的 i = (i == banners.length) ? 0 : i; 做到了，所以它会继续增加并且 banners.length 比数组位置大 1（一旦你超过 banners.length，你最终会继续变得未定义），然后你没有在 "url("+banners[i]+")"; 部分中加上引号，导致 url 值不正确，你需要进行插值。

使用 jquery 动态更改和动画背景图像

Change and animate background image dynamacally using jquery

jquery

jquery-animate