如何使用CSS和Javascript旋转（或更改）背景图片

Question

我已经看了几个小时的stackoverflow，发现了一个与我要实现的目标相似的主题

JavaScript，如何每隔x秒更改div标签的背景

当我在脚本中修改此解决方案时，我完全没有背景图片，因此我想回到源头获得一些新鲜的见解和想法。

这是我的设置：HTML

    <div id="Background"></div>

CSS：

    .background-1 {
     background: url('Images/mybg1.jpg');
     -webkit-transition: background 500ms linear;
     -moz-transition: background 500ms linear;
     -o-transition: background 500ms linear;
     -ms-transition: background 500ms linear;
     transition: background 500ms linear;
     }

    .background-2 {
     background: url('Images/mybg2.jpg');
     -webkit-transition: background 500ms linear;
     -moz-transition: background 500ms linear;
     -o-transition: background 500ms linear;
     -ms-transition: background 500ms linear;
     transition: background 500ms linear;
     }

head标签中的Javascript

      <script>
      $(document).ready(function(){
      setInterval(function() {
        if($('#background').hasClass('background-1')) {
            $('#background').addClass('background-2');
            setTimeout(function() {
                $('#backdrop').removeClass('background-1');
            }, 1000);
        }
        else if($('#background').hasClass('background-2')) {
            $('#background').addClass('background-1');
            setTimeout(function() {
                $('#backdrop').removeClass('background-2');
            }, 1000);
        }
}, 2000);
});

我想以某种方式能够将多个图像用作背景，并使它们每5秒钟左右换一次。 我该怎么做呢？

这是我尝试过的HTML

    <div id="Background">
    <img src="<%=skinpath%>/images/mybg2.jpg" class="bgM"/>  
    <img src="<%=skinpath%>/images/mybg1.jpg" class="bgM"/>
    </div>

CSS：

    #Background, img.bgM {
    background:#fff no-repeat 0 bottom;position:absolute;bottom:0;min-width:960px;min-height:100%;z-index:-99999; 
    background-position: top center;
    }

Javascript：

    <dnn:DnnJsInclude runat="server" FilePath="js/jquery.cycle.all.js" PathNameAlias="SkinPath" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> 

    $(document).ready(function() {
            $('#Background').cycle({
            fx: 'fade',
            pager: '#smallnav', 
            pause:   1, 
            speed: 1800,
            timeout:  3500 
        });         
    });

最后一个解决方案有效，但是我无法将图像放置在顶部中心位置（即使在css中指定）。对此，我们将给予任何帮助！

Answer 1

您可以尝试为每个图像使用不同的类，然后仅在给定间隔内换出CSS类。

$(document).ready(function(){
  var seconds = 5000;
  var step = 0;
  var limit = 5;

  $("#Background").addClass("image-"+step);

  setInterval(function(){
    $("#Background").removeClass("image-"+step);
    step = (step > limit) ? 0 : step + 1;
    $("#Background").addClass("image-"+step);
  },seconds);
});

我不确定您要尝试哪种动画，但是可以先fadeOut然后fadeIn 。

$(document).ready(function(){
  var seconds = 5000;
  var step = 0;
  var limit = 5;

  $("#Background").addClass("image-"+step).fadeIn(500);

  setInterval(function(){
    $("#Background").fadeOut(500,function(){
       $(this).removeClass("image-"+step);
       step = (step > limit) ? 0 : step + 1;
      $("#Background").addClass("image-"+step).fadeIn(500);
    });
  },seconds);
});

Answer 2

您可以尝试像这样交换背景：

为每个背景创建CSS类，并将转换作为规则集的一部分包括在内：

.background-1 {
 background: url('background-1.jpg');
 -webkit-transition: background 500ms linear;
 -moz-transition: background 500ms linear;
 -o-transition: background 500ms linear;
 -ms-transition: background 500ms linear;
 transition: background 500ms linear;

}

添加一个脚本，该脚本将定期交换类。 （您很可能将此脚本包装在$（document）.ready中）。由于要转换背景，因此您可能不希望立即删除先前的背景，因此可以在转换完成后使用延迟调用将其删除。

以下示例将每两秒钟启动一次后台切换，并在1秒后删除之前的后台。 因为在我的CSS中，我声明过渡应该花费0.5秒，所以在删除旧背景之前已经有新的背景了：

setInterval(function() {
            if($('#background').hasClass('background-1')) {
                $('#background').addClass('background-2');
                setTimeout(function() {
                    $('#background').removeClass('background-1');
                }, 1000);
            }
            else if($('#background').hasClass('background-2')) {
                $('#background').addClass('background-1');
                setTimeout(function() {
                    $('#background').removeClass('background-2');
                }, 1000);
            }
}, 2000);

注意：我提供的代码将要求您将多个if / else if语句链接在一起，这可能是一种更有效的方法。

作为我即将进行的项目的预告片，我做了类似的事情（背景颜色而不是图像），您可以在此处查看 。

更新：忘了提及，请确保在Div元素中声明一个背景类：

<div id="background" class="background-1"></div>

Answer 3

听起来您正在尝试幻灯片放映。 我强烈建议使用JQuery Cycle Plugin或Cycle2 。 “ Cycle2 入门”页面上有不错的增量演示/教程。