Question

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

网上有很多图片幻灯片，但我需要在我的网站上附上背景图片。

非常感谢任何帮助！

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

Answer 2

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

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

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

然后将onload添加到body标签，例如：

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

使用JavaScript / Jquery淡化背景图像

2 个答案: