如何使用CSS和Javascript旋转(或更改)背景图像

Question

我已经通过stackoverflow看了几个小时了，我找到了一个与我想要实现的主题相似的主题

JavaScript, How to change the background of a div tag every x seconds

当我在我的脚本中修改这个解决方案时，我没有得到任何背景图像，所以我想我应该回到源代码中来获得一些新的观点和想法。

下面是我的设置: 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中，我声明了转换应该需要.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语句链接在一起，可能有一种更有效的方法来实现这一点。

我已经做了一些类似的东西(背景颜色而不是图像)作为我即将到来的项目的预告片，你可以在here上查看它。

Div更新：忘记提到了，一定要在你的元素中声明一个后台类：

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

Answer 3

听起来你像是在做幻灯片。我强烈推荐JQuery Cycle Plugin或Cycle2。Cycle2 Getting Started page有一个很好的增量演示/教程。