Random 具有淡入效果的随机变化背景_Random_Background_Fadein_Fadeout

Random 具有淡入效果的随机变化背景

random

Random 具有淡入效果的随机变化背景,random,background,fadein,fadeout,Random,Background,Fadein,Fadeout,阿罗哈：我的朋友提前，谢谢！我试图修改我的网页上随机变化的背景，以添加淡入淡出效果，所以从一个背景到另一个背景的变化不是那么突然和尖锐。我曾尝试在网上无休止地搜索我的问题的解决方案，但这一切都指向添加jQuery插件，如果可能的话，我最好避免添加jQuery插件我的工作代码如下，需要添加一些fadein/fadeout效果 <script type="text/javascript"> var num; var temp=0; var speed=

阿罗哈：我的朋友

提前，谢谢！我试图修改我的网页上随机变化的背景，以添加淡入淡出效果，所以从一个背景到另一个背景的变化不是那么突然和尖锐。我曾尝试在网上无休止地搜索我的问题的解决方案，但这一切都指向添加jQuery插件，如果可能的话，我最好避免添加jQuery插件

我的工作代码如下，需要添加一些fadein/fadeout效果

<script type="text/javascript">     
   var num;
   var temp=0;
   var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
   var preloads=[];

/* add any number of images here */

preload(
        'images/bg1.jpg',
        'images/bg2.jpg',
        'images/bg3.jpg',
        'images/bg4.jpg',
        'images/bg5.jpg'

       );

function preload(){

for(var c=0;c<arguments.length;c++) {
   preloads[preloads.length]=new Image();
   preloads[preloads.length-1].src=arguments[c];
  }
 }

function rotateImages() {
   num=Math.floor(Math.random()*preloads.length);
if(num==temp){
   rotateImages();
 }
else {
   document.body.style.backgroundImage='url('+preloads[num].src+')';
   temp=num;

setTimeout(function(){rotateImages()},speed);
  }
 }

if(window.addEventListener){
   window.addEventListener('load',rotateImages,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',rotateImages);
  }
 }      
</script>


var-num；
var-temp=0；
var速度=5000；/*此设置为5秒，编辑值以满足要求*/
var预载=[]；
/*在此处添加任意数量的图像*/
预载(
'images/bg1.jpg'，
'images/bg2.jpg'，
'images/bg3.jpg'，
'images/bg4.jpg'，
“images/bg5.jpg”
);
函数预加载（）{
对于（var c=0；c如何不使用插件：

使用2层作为背景图像，将它们放置在彼此的顶部
初始化底层第一个图像的页面，使顶层不可见（使用CSS不透明属性，确保谷歌搜索，不同的浏览器使用不同的方法）

淡出时：

为顶层设置新图像
使用短循环（帧持续时间<40ms）setTimeout将顶层的不透明度增加到1。使用1/（速度/帧持续时间）的增量
完全淡入后，将底层设置为使用新（现在可见）图像，并将顶层设置为不透明度0

像这样：
<html>
<head>
    <script type="text/javascript">     
        var num;
        var current=0;
        var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
        var fps = 25;
        var fadeDuration = 1000;
        var opacityIncrement = 1/(fadeDuration/(1000/fps));
        var preloads=[];
        var topLayerOpacity = 0;

        var topLayer = document.createElement("div");
        var bottomLayer = document.createElement("div");

        setOpacity(topLayer, 0);

        /* add any number of images here */

        preload(
                'images/bg1.jpg',
                'images/bg2.jpg',
                'images/bg3.jpg',
                'images/bg4.jpg'

               );


        function loadComplete(){
            //add layers to background div
            document.getElementById('backgroundContainer').appendChild(bottomLayer);
            document.getElementById('backgroundContainer').appendChild(topLayer);

            rotateImages();
        }


        function preload(){

            //preload images
            for(var c=0;c<arguments.length;c++) {
                    preloads[preloads.length]=new Image();
                    preloads[preloads.length-1].src=arguments[c];
            }
        }

        // selecte new random image from preloads and start fade-in 
        function rotateImages() {
            num=Math.floor(Math.random()*preloads.length);
            //don't select current image
            if(num==current){
                rotateImages();
            }
            else {
               topLayer.style.backgroundImage = 'url('+preloads[num].src+')';
               current=num;

               //start fade-in
               fadeIn();

               setTimeout(function(){rotateImages()},speed);
            }
        }

        // fade in topLayer
        function fadeIn(){
            if (topLayerOpacity < 1){
                topLayerOpacity += opacityIncrement;
                setOpacity(topLayer, topLayerOpacity);// opacityIncrement);
                setTimeout(fadeIn, 1000/fps);
            }else{
                fadeInComplete();
            }   
        }

        //return opacity for element
        function getOpacity(el){
            alert (el.style.opacity);
            return el.style.opacity;
        }

        //sets opacity on element
        function setOpacity(el, val){
            el.style.opacity = val;
            el.style.filter = 'alpha(opacity=' + val*100 + ')';
        }

        //called when fadeIn completed
        function fadeInComplete(){
            bottomLayer.style.backgroundImage = topLayer.style.backgroundImage;
            topLayerOpacity = 0;
            setOpacity(topLayer, topLayerOpacity);
        }

        if(window.addEventListener){
            window.addEventListener('load',loadComplete,false);
        }
        else { 
            if(window.attachEvent){
                window.attachEvent('onload',loadComplete);
            }
        }      

    </script>

    <style type="text/css">

        #backgroundContainer{
            width:100%;
            height:100%;
            position:absolute;
            /*background-color:green;*/
        }

        #backgroundContainer div{
            width:100%;
            height:100%;
            position:absolute;
            top:0;
        }

        .page {
            width:100%;
            text-align:center;
            position:absolute;
        }

        .contents{
            width:400px;
            margin:0 auto;
            background-color:lightblue;
        }
    </style>
</head>
<body>
    <!-- holds background layers -->
    <div id="backgroundContainer"></div>

    <!-- substitutes for 'body' on this webpage -->
    <div class="page">

        <!-- contents for your webpage, through css centered within page-div -->
        <div class="contents">
            <p>Contents</p>
        </div>
    </div>
</body>
</html>


var-num；
无功电流=0；
var speed=5000；/*此值设置为5秒，编辑值以满足要求*/
var fps=25；
var fadeDuration=1000；
var opacityIncrement=1/（衰减/（1000/fps））；
var预载=[]；
var topLayerOpacity=0；
var topLayer=document.createElement（“div”）；
var bottomLayer=document.createElement（“div”）；
setOpacity（顶层，0）；
/*在此处添加任意数量的图像*/
预载(
'images/bg1.jpg'，
'images/bg2.jpg'，
'images/bg3.jpg'，
“images/bg4.jpg”
);
函数loadComplete（）{
//将层添加到背景div
document.getElementById（'backgroundContainer'）.appendChild（底层）；
document.getElementById（'backgroundContainer'）.appendChild（顶层）；
旋转图像（）；
}
函数预加载（）{
//预加载图像
对于（var c=0；c如何不使用插件：

使用2层作为背景图像，将它们放置在彼此的顶部
初始化底层第一个图像的页面，使顶层不可见（使用CSS不透明属性，确保谷歌搜索，不同的浏览器使用不同的方法）

淡出时：

为顶层设置新图像
使用短循环（帧持续时间<40ms）setTimeout将顶层的不透明度增加到1。使用1/（速度/帧持续时间）的增量
完全淡入后，将底层设置为使用新（现在可见）图像，并将顶层设置为不透明度0

像这样：
<html>
<head>
    <script type="text/javascript">     
        var num;
        var current=0;
        var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
        var fps = 25;
        var fadeDuration = 1000;
        var opacityIncrement = 1/(fadeDuration/(1000/fps));
        var preloads=[];
        var topLayerOpacity = 0;

        var topLayer = document.createElement("div");
        var bottomLayer = document.createElement("div");

        setOpacity(topLayer, 0);

        /* add any number of images here */

        preload(
                'images/bg1.jpg',
                'images/bg2.jpg',
                'images/bg3.jpg',
                'images/bg4.jpg'

               );


        function loadComplete(){
            //add layers to background div
            document.getElementById('backgroundContainer').appendChild(bottomLayer);
            document.getElementById('backgroundContainer').appendChild(topLayer);

            rotateImages();
        }


        function preload(){

            //preload images
            for(var c=0;c<arguments.length;c++) {
                    preloads[preloads.length]=new Image();
                    preloads[preloads.length-1].src=arguments[c];
            }
        }

        // selecte new random image from preloads and start fade-in 
        function rotateImages() {
            num=Math.floor(Math.random()*preloads.length);
            //don't select current image
            if(num==current){
                rotateImages();
            }
            else {
               topLayer.style.backgroundImage = 'url('+preloads[num].src+')';
               current=num;

               //start fade-in
               fadeIn();

               setTimeout(function(){rotateImages()},speed);
            }
        }

        // fade in topLayer
        function fadeIn(){
            if (topLayerOpacity < 1){
                topLayerOpacity += opacityIncrement;
                setOpacity(topLayer, topLayerOpacity);// opacityIncrement);
                setTimeout(fadeIn, 1000/fps);
            }else{
                fadeInComplete();
            }   
        }

        //return opacity for element
        function getOpacity(el){
            alert (el.style.opacity);
            return el.style.opacity;
        }

        //sets opacity on element
        function setOpacity(el, val){
            el.style.opacity = val;
            el.style.filter = 'alpha(opacity=' + val*100 + ')';
        }

        //called when fadeIn completed
        function fadeInComplete(){
            bottomLayer.style.backgroundImage = topLayer.style.backgroundImage;
            topLayerOpacity = 0;
            setOpacity(topLayer, topLayerOpacity);
        }

        if(window.addEventListener){
            window.addEventListener('load',loadComplete,false);
        }
        else { 
            if(window.attachEvent){
                window.attachEvent('onload',loadComplete);
            }
        }      

    </script>

    <style type="text/css">

        #backgroundContainer{
            width:100%;
            height:100%;
            position:absolute;
            /*background-color:green;*/
        }

        #backgroundContainer div{
            width:100%;
            height:100%;
            position:absolute;
            top:0;
        }

        .page {
            width:100%;
            text-align:center;
            position:absolute;
        }

        .contents{
            width:400px;
            margin:0 auto;
            background-color:lightblue;
        }
    </style>
</head>
<body>
    <!-- holds background layers -->
    <div id="backgroundContainer"></div>

    <!-- substitutes for 'body' on this webpage -->
    <div class="page">

        <!-- contents for your webpage, through css centered within page-div -->
        <div class="contents">
            <p>Contents</p>
        </div>
    </div>
</body>
</html>


var-num；
无功电流=0；
var speed=5000；/*此值设置为5秒，编辑值以满足要求*/
var fps=25；
var fadeDuration=1000；
var opacityIncrement=1/（衰减/（1000/fps））；
var预载=[]；
var topLayerOpacity=0；
var topLayer=document.createElement（“div”）；
var bottomLayer=document.createElement（“div”）；
setOpacity（顶层，0）；
/*在此处添加任意数量的图像*/
预载(
'images/bg1.jpg'，
'images/bg2.jpg'，
'images/bg3.jpg'，
“images/bg4.jpg”
);
函数loadComplete（）{
//将层添加到背景div
document.getElementById（'backgroundContainer'）.appendChild（底层）；
document.getElementById（'backgroundContainer'）.appendChild（顶层）；
旋转图像（）；
}
函数预加载（）{
//预加载图像
对于（var c=0；cOkay，我应该指出，我不是CSS或HTML的高手。我在问这个问题之前对不透明度进行了研究，我记得它需要一些不同的步骤才能在所有浏览器中工作。我不知道如何使用两个层。：/I可以编程Java，但上面的代码不是我的工作，所以我需要更广泛的/childlike解释或简单的代码。：s谢谢你的回复！@arneOkay，我应该指出，我不是CSS或HTML的鲨鱼。我在问这个问题之前研究过不透明度，我记得它需要一些不同的步骤才能在所有浏览器中工作。我不知道如何使用2层/我可以编写Java程序，但上面的代码不是我的工作，因此我需要一个更广泛/更孩子气的解释，或者只是简单的代码。：s谢谢你的回复！@arne