如何制作一个Javascript渐变滑动背景

How to make a Javascript fade sliding background?

本文关键字：渐变 Javascript 背景 一个 何制作      更新时间：2023-09-26

我正在做一些期末项目，但是我一直在弄乱我想用作背景的图像滑块。

它是有效的，但是没有特殊的效果使它慢慢褪色。

你能给我的问题提个解决方案吗?

我的代码:

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

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

工作示例- http://codepen.io/nitishdhar/pen/fhjkD

代码设置&解释

像这样设置你的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>

创建一个div来存放你想要使用的所有背景图片。

添加一些CSS - 

.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;
}
然后添加一些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-holderdiv &移动到最后，同时淡化它。然后，它通过淡化来呈现下一张图像。每3000毫秒(1500毫秒)重复一次，同时将当前图像淡出。1500用于下一张图像的衰落)

setupBackgroundAnimation函数调整bg-holder的大小以适应当前窗口的大小

!function( global, doc ){
 var images = ["img/bck.png", "img/bck2.png", "img/bck3.png" /* ... */ ]
  , i = 0;
 global['onload'] = function() {
  setInterval (function(){
    i === 5 && (i = 0);
     doc.body.style.backgroundImage = 'url(' + images[i] + ')';
    i++;
    }, 3000);
  }
 }(window, document)
相关文章：