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);

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

感谢。

已编辑：

Pelase找到我的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动态更改和动画背景图像

1 个答案: