Question

我正在尝试创建一个背景不断变化的主页。现在，我设置它以便身体本身保持背景图像，我只想让一个图像淡入下一个图像然后循环到开头。

我的第一个问题：它不起作用。期。我的第二个问题：如果它确实有效，它可能会在延迟间隔之前立即转换到下一个......我怎么能阻止这个？

以下是我的代码，可以在html文档的标签底部找到：

$(window).load(function() {
           var current_scene = 0;
           setInterval(function() {
               if (current_scene == 0) {
                   var current_scene = 1;
                   $(body).animate({
                       backgroundImage: 'url(...)'
                   },400);
               } else if (current_scene == 1) {
                   var current_scene = 2;
                   $(body).animate({
                       backgroundImage: 'url(...)'
                   },400);
               } else {
                   var current_scene = 0;
                   $(body).animate({
                       backgroundImage: 'url(...)'
                   },400);
               }
           }, 3000);
       });

提前致谢！

Answer 1

你无法使用js为身体背景图像设置动画，并将身体选择器更改为$（“body”）

          $(document).ready(function(){
                var current_scene = 0;
                setInterval(function() {
                    startAnimation();
                }, 3000);

                function startAnimation() {
                    if (current_scene == 0) {
                        current_scene = 1;
                        $("body").css({ 'background-image': 'url(1.png)' });
                    } else if (current_scene == 1) {
                        current_scene = 0;
                        $("body").css({ 'background-image': 'url(2.png)' });
                    }
                }
            });

或试试这个干净的代码

       $(document).ready(function () {
            var img_array = ['1.png', '2.png'];
            var indexOfImage = 0;
            var interval = 3000;
            setTimeout(function () {
                $('body').css('backgroundImage', 'url(' + img_array[indexOfImage++ % img_array.length] + ')');
                setTimeout(arguments.callee, interval);
            }, interval);
        });

为身体添加一些风格

body {
    background-image: none;
    width: 100%;
    height: 100%;
    -webkit-transition: background 0.6s ease-in-out;
    -moz-transition: background 0.6s ease-in-out;
    -o-transition: background 0.6s ease-in-out;
    transition: background 0.6s ease-in-out;
    background-size: cover;
    background-repeat: repeat;
    background-position: 0 0;
}

Answer 2

这是工作代码

全局声明变量并为选择器固定引号$（＆＃34; body＆＃34;）

var current_scene = 0;
    $(window).load(function() {

           setInterval(function() {
               if (current_scene == 0) {

                   current_scene = 1;

                   $("body").animate({

                       backgroundImage: 'url("someimagename.png")'

                   },400);

               } else if (current_scene == 1) {

                   current_scene = 2;

                   $("body").animate({

                       backgroundImage: 'url("someimagename2.png")'

                   },400);

               } else {

                   current_scene = 0;

                   $("body").animate({

                       backgroundImage: 'url("someimagename3.png")'

                   },400);

               }
           }, 3000);

       });

jQuery背景图像转换如何？

2 个答案: