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 中指定）。非常感谢您对此的任何帮助！

4

3 回答 3

2

您可以尝试为每个图像使用不同的类，然后在给定的时间间隔内交换 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);
});
于 2013-05-13T18:53:25.893 回答
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>
于 2013-05-13T19:04:12.717 回答
0

听起来您正在尝试进行幻灯片放映。我强烈推荐JQuery Cycle Plugin或Cycle2。Cycle2入门页面有一个很好的增量演示/教程。

于 2013-05-13T20:00:40.840 回答