如何使Javascript淡入滑动背景？_Javascript_Jquery_Html_Css

如何使Javascript淡入滑动背景？

javascript jquery html css

如何使Javascript淡入滑动背景？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在做一些最后一学年的项目，但我一直在搞乱我想用作背景的图像滑块它正在工作，但没有特殊效果使它慢慢消失你能为我的问题提出解决办法吗到目前为止，我的代码是： <script type="text/javascript"> var images = new Array(); images[0] = "img/bck.png"; images[1] = "img/bck2.png"; images[2] = "img/bck3.png";

我正在做一些最后一学年的项目，但我一直在搞乱我想用作背景的图像滑块

它正在工作，但没有特殊效果使它慢慢消失

你能为我的问题提出解决办法吗

到目前为止，我的代码是：

<script  type="text/javascript">
    var images = new Array();
    images[0] = "img/bck.png";
    images[1] = "img/bck2.png";
    images[2] = "img/bck3.png";
    images[3] = "img/bck4.png";
    images[4] = "img/bck5.png";

    window.onload = function showDelay() {
        setInterval ("changeBg()", 3000);
    }

    var i=0;
    function changeBg() {
        if (i==5) {
            i=0;
        }
        document.body.style.backgroundImage = 'url('+images[i]+')';
        i++;
    }
</script>


var images=新数组（）；
图像[0]=“img/bck.png”；
图片[1]=“img/bck2.png”；
图片[2]=“img/bck3.png”；
图片[3]=“img/bck4.png”；
图片[4]=“img/bck5.png”；
window.onload=函数showDelay（）{
setInterval（“changeBg（）”，3000）；
}
var i=0；
函数changeBg（）{
如果（i==5）{
i=0；
}
document.body.style.backgroundImage='url（'+images[i]+'）；
i++；
}

您可以使用jQuery实现相同的功能

工作示例-

代码设置和解释

按如下方式设置HTML-

<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
 <div class="bg-holder">
   <img class="fade" src="http://placehold.it/940x800/DF013A">
   <img class="fade" src="http://placehold.it/940x800/A901DB">
   <img class="fade" src="http://placehold.it/940x800/013ADF">
 </div>
</body>
</html>

然后添加一些jQuery代码，不要忘记在头脑中使用include jQuery库-

function setupBackgroundAnimation() {
  $('img.fade').hide();
  $('.bg-holder').css({ 'height': $(window).height(),'width': $(window).width() });
  animateBackground();
}

function animateBackground() {
  $(".bg-holder img.fade").first().appendTo('.bg-holder').fadeOut(1500);
  $(".bg-holder img").first().fadeIn(1500);
  setTimeout(animateBackground, 3000);
}

/*Initiate Animated Background on Document Ready*/
$(document).ready(function() {
   setupBackgroundAnimation();
});

animateBackground函数将保留bg holder div中的第一个图像，并在淡出时将其移动到最后一个图像。然后，它通过淡入淡出下一幅图像。每3000毫秒重复一次（在淡出当前图像时拍摄1500毫秒，在下一幅图像中淡出1500毫秒）

setupBackgroundAnimation函数调整bg支架的大小以适应当前窗口大小。

为什么您的

changeBg（）

函数位于

“

”上？JQyery支持fadeIn和fadeOut。像字符一样工作两件事，首先：不要使用

newarray（）

，使用数组文字（

images=['img/bck.png'、'img/bck2.png'/*等等*/]

）；第二：不要将函数作为字符串传递给

setInterval（）

，传递一个函数。@cr0ss这是因为没有“@TGH”它就不能工作。我搜索了JQuery脚本，但结果不太好。你应该真正解释一下代码的作用。从长远来看，仅仅给OP一些代码（可能有效，可能无效）对他们没有帮助。你使用的是什么浏览器？你是说你的实现不起作用还是代码笔演示url也不起作用？@RikEckhardt-它起作用了吗？您使用的是哪种浏览器？@RikEckhardt您使用的是哪种浏览器？

.bg-holder {
  position: fixed;
  z-index: -1; 
  top: 0; 
  left: 0; 
  background-color: #000;
}
.bg-holder img.fade {
  position: absolute;
  top: 0;
  display: none;
  width: 100%;
  height: 100%;
  z-index: -1;
}

function setupBackgroundAnimation() {
  $('img.fade').hide();
  $('.bg-holder').css({ 'height': $(window).height(),'width': $(window).width() });
  animateBackground();
}

function animateBackground() {
  $(".bg-holder img.fade").first().appendTo('.bg-holder').fadeOut(1500);
  $(".bg-holder img").first().fadeIn(1500);
  setTimeout(animateBackground, 3000);
}

/*Initiate Animated Background on Document Ready*/
$(document).ready(function() {
   setupBackgroundAnimation();
});