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

我已经在stackoverflow中浏览了好几个小时了，我发现了一个类似于我试图实现的主题

当我在我的脚本中修改这个解决方案时，我根本没有背景图像，所以我想我会回到源代码中获得一些新的视角和想法

以下是我的设置： HTML

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);
});

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中指定，我也无法使图像定位到顶部中心。非常感谢您在这方面的任何帮助

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

我不确定你想做什么样的动画，但你可以先淡出，然后淡出

---

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

为每个背景创建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/elseif语句链接在一起，可能有一种更有效的方法来实现这一点

我已经做了一些类似的背景颜色，而不是图像作为我的一个即将到来的项目的挑逗，你可以检查出来

更新：忘记提及，请确保在Div元素中声明一个后台类：

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

---

听起来你想做幻灯片放映。我强烈推荐手术室。Cycle2有一个很好的增量演示/教程。

在哪里指定图像？我插入这个并将其添加到CSS代码中。image1{background:fff url'Images/kdmcbg1.jpg'不重复0 bottom；}。image2{background:fff url'Images/kdmcbg2.jpg'不重复0 bottom；}这就是你的意思吗？@skulomania是的，但我有一个破折号。image-0{background}。image-1{background}。。等等，我得到了一部分，但是，我不能得到第二张图片来显示我错过了什么@Skullomania，对不起，我的错。将steplimit。所以我刚得到了第一个到第二个的转换，但是当它到达那里时，它只是重复第二个…我如何将它循环回第一个？我很接近我添加了你要求的代码，我不确定我做错了什么…我仍然看到一个全白色的背景。有没有应该添加的jqery插件？没有插件，只有jQuery库的标准链接就足够了。你的更新代码可以在线查看吗？哦，我忘了提一下，确保你已经将初始类添加到你的后台div中。谢谢兄弟…我让它工作了…JSFIDLE帮了大忙。我现在如何淡入或淡出图像以实现平滑过渡？我目前已包括该插件。我要么没有像在我的原始文章中尝试的部分那样得到css定位，要么什么都没有。我对DotNetNuke标记不熟悉。您应该从站点的一个示例开始进行故障排除，然后进行小的更改，直到看起来像您想要完成的。我刚刚注意到作者最近发布了一个Cycle2。我正在更新我的答案。

$(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);
});

$(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);
});

.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;

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);

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