使用 JavaScript/Jquery 淡化背景图像答案

【问题标题】：Fading through background images with JavaScript/Jquery使用 JavaScript/Jquery 淡化背景图像
【发布时间】：2011-10-09 00:40:09
【问题描述】：

我不太了解 Javascript。我想要大约 5 个背景图像以 5 秒的间隔连续旋转和淡出。

网络上有很多图片幻灯片，但我需要它与我网站上的背景图片一起使用。

非常感谢任何帮助！

【问题讨论】：

标签： javascript html css

【解决方案1】：

使用jQuery 你可以这样做：

setInterval(function(){
    var source = $("#background-images img:first").attr("src");
    $('#background-images img:first').appendTo($('#background-images'));
    $('#fading-images-container').css('background', 'url('+ source +') no-repeat');
},5000);

html:

<div id="fading-images-container"> </div> <!-- this div will show the fading background images after picking them up from the background-images div -->
<div id="background-images"> <!-- hide this div in the CSS, it's only to hold the images--> 
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
</div>

要使用淡入淡出，我建议不要使用背景图像，而是使用 div 中的实际图像。

过去我是这样做的：

setInterval(function(){
    $('#fading-images:first-child').fadeOut('slow')
     .next('img').fadeIn('slow')
     .end().appendTo('#slideshow');}, 
     4000);

html:

  <div id="fading-images"> 
    <img src="img/home-1.jpg"> 
    <img src="img/home-2.jpg"> 
    <img src="img/home-3.jpg"> 
  </div>

【讨论】：

.remove() 不会完全从 DOM 中删除该图像吗？也许将其更改为 $('#background-images img:first').appendTo($('#background-images')); ?哪个会将它移到列表的末尾？
感谢您的快速回复，虽然我似乎无法让它工作。我也尝试替换 $('#background-images img:first').remove(); with $('#background-images img:first').appendTo($('#background-images'));但仍然没有运气。 javascript 是否只需要围绕它？谢谢！
@WSKid：你是对的。附加会更好。更新。 @Eza：抱歉，我忘了提到我的代码假设您可以或正在使用 jQuery 库
哦，我明白了，所以我需要将代码放入：$(function(){//*CODE*//}); ?我有这个库ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js 谢谢！
@Eza：是的，你是对的，你可以把 $(function(){//*CODE*//}); 放在文件准备就绪时触发

【解决方案2】：

此代码在所有浏览器上都可以正常工作，并且没有 jquery 或 YUI 等依赖项。一个限制是，如果指定了高度和宽度，则图像必须全部格式化为与图像标签相同的大小。

将以下代码添加到 html 文档的头部：

<script language="javascript type="text/javascript">    
/*  ****************************
        * updated for all browsers by 
        * Evan Neumann of Orbiting Eden on 
        * October 6, 2011.      
        * www.orbitingeden.com - evan@orbitingeden.com
        * original version only worked for IE
        *****************************/
    /*  ****************************
        * this works by having the primary image in an <img> tag  
        * cycled once every [slideShowSpeed] milliseconds
        * at the end of the cycle, the backgound image is advanced and 
        * the foreground image is stepped more transparent
        * until the background image is fully exposed.
        * finally, the foreground image is advanced and reset to 100% opaque
        *****************************/

    <!-- Begin
    /*  *****************************
     *  * editable by user
     *  ***************************/
    var slideShowSpeed      = 5000; // Set slideShowSpeed (milliseconds)        shared by IE and other borwsers
    var crossFadeDuration   = 5;    // Duration of crossfade (1/10 second)      shared by IE and other borwsers
    var crossFadeIncrement  = .05;  //crossfade step amount (1 is opaque)   for non-IE browsers

    // Specify the image files
    var Pic = new Array();      // do not change this line
    // to add more images, just continue the pattern, adding to the array below
    Pic[0] = 'images/dare2wear-427ED-e.jpg';        
    Pic[1] = 'images/PBW_3238EDSM-e.jpg';           
    Pic[2] = 'images/dare2wear-441_2ED-e.jpg';      

    /*  ********************************
        * do not change anything below this line
        **********************************/
    var f = 0;          //index of the foreground picture
    var b = 1;          //index of the background picture
    var p = Pic.length; //number of pictures loaded and in queue - this may increase as time goes on depending on number and size of pictures and network speed

    //load the picture url's into an image object array
    //used to control download of images and for IE shortcut
    var preLoad = new Array();
    for (i = 0; i < p; i++) { 
        preLoad[i] = new Image();
        preLoad[i].src = Pic[i];
    }

    function runSlideShow() {//this is trigerred by <body onload="runSlideShow()" > 
        //if IE, use alternate method
        if (document.all) {
            document.images.SlideShow.style.filter="blendTrans(duration=2)";
            document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
            document.images.SlideShow.filters.blendTrans.Apply();
        }

        //increment the foreground image source
        document.images.SlideShow.src = preLoad[f].src;

        //if IE, use the shortcut
        if(document.all) {
            document.images.SlideShow.filters.blendTrans.Play();
        }
        //all other browser use opacity cycling
        else    {
            var imageContainer  = document.getElementById('imageContainer');
            var image           = document.images.SlideShow;
            //convert an integer to a textual number for stylesheets
            imageContainer.style.background = "url('"+Pic[b]+"')";
            //set opacity to fully opaque (not transparent)
            image.style.opacity = 1;
            //run fade out function to expose background image
            fadeOut();
        }

        //increment picture index
        f++;
        //if you have reached the last picture, start agin at 0
        if (f > (p - 1)) f = 0;
        //set the background image index (b) to one advanced from foreground image
        b = f+1;
        //if b is greater than the number of pictures, reset to zero
        if(b >= p)  {b = 0;}

        //recursively call this function again ad infinitum
        setTimeout('runSlideShow()', slideShowSpeed);
    }

    function fadeOut(){
        //convert to element
        var el = document.images.SlideShow;

        //decrement opacity by 1/20th or 5%
        el.style.opacity = el.style.opacity - crossFadeIncrement;
        //if we have gone below 5%, escape out to the next picture
        if(el.style.opacity <= crossFadeIncrement)  {
            return; 
        }
        //wait 50 milliseconds then continue on to decrement another 5%
        setTimeout('fadeOut()', crossFadeDuration*10);
    }

然后在body标签上加一个onload，比如：

<body onLoad="runSlideShow()">

在文档的某处添加两个具有以下 id 的元素：

<!-- this is the main image background  and can be a div, td, fieldset or similar-->
<div id="imageContainer">
  <!-- this is the main image foreground -->
  <img id="SlideShow" name='SlideShow' width="240" height="320">
</div>

【讨论】：