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

Question

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

3

我已经在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;
     }

标签中的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中指定了）。非常感谢任何帮助！

- Skullomania

3个回答

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>

- theaccordance

我添加了你请求的代码，但不确定哪里出错了...我仍然看到全白的背景。是否需要添加一个jQuery插件？ - Skullomania

没有插件，只需标准的jQuery库链接即可。你更新后的代码可以在线查看吗？ - theaccordance

哦，我忘了提醒你，请确保已将初始类添加到您的背景div中。 - theaccordance

谢谢兄弟，我已经搞定了...JSFiddle帮了很大的忙。现在我该如何淡入或淡出图像以实现平滑过渡？ - Skullomania

0

听起来你想做一个幻灯片展示。我强烈推荐使用JQuery Cycle Plugin或Cycle2。Cycle2 Getting Started page有一个不错的递增演示/教程。

- Sonny

我目前已经包含了插件。但是我要么得不到CSS定位，就像我原帖中“我尝试过的”部分一样，要么什么都没有。 - Skullomania

code <dnn:DnnJsInclude runat="server" FilePath="js/jquery.cycle.all.js" PathNameAlias="SkinPath" /> - Skullomania

我不熟悉DotNetNuke标签。你应该从网站上的示例开始进行故障排除，然后进行小的更改，直到它看起来像你想要完成的内容。我刚刚注意到作者最近发布了一个Cycle2。我正在更新我的答案。 - Sonny

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Reactgular · Accepted Answer

您可以尝试为每个图像使用不同的类，然后在给定的时间间隔内交换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);
});