Background Image/Color Changing_问答_开发者_运维开发者技术经验分享

As part of my website projects, I would like to add a script, javascript or whatever, that changes the background image, but the problem is, I'm don't know how to program with Java. I only know Lua, HTML, & CSS.

The reason for that is because I'd like the background image to change after 5 seconds (fades into another image) and then again to another. A loop.

I have found something but it's said that it doesn't work:

<script language="JavaScript">  


    var Rollpic1 = "1.jpg";
    var Rollpic2 = "2.jpg";
    var Rollpic3 = "3.jpg";

    var PicNumber=1;

    var NumberOfPictures=3;

    var HowLongBetweenPic=5;


    function SwitchPic(counter)开发者_如何学Python{

        if(counter < HowLongBetweenPic){

            counter++;


            document.roll.src = eval("Rollpic" + PicNumber);


            CallSwitchPic=window.setTimeout("SwitchPic("+counter+")",1500); 

            }

            else{

                if(PicNumber < NumberOfPictures){
                    PicNumber++;
                    SwitchPic(0);
                }
                else{
                    PicNumber=1;
                    SwitchPic(0);
                    }

            }

    }
    </script>


        <body onload="SwitchPic(0)">        

    <img src="1.jpg" height="300" width="400" border="0" name="roll">

This will do it:

<script>
document.body.style.backgroundImage="url('path/to/background.png')";
</script>

Or if you want it to happen when you click something:

<script>
function change() {
    document.body.style.backgroundImage="url('path/to/background.png')";
}
</script>

<input type="button" onclick="change()" value="Change it" />

To have some code loop on a timer:

<script>
function timedCount() {
    // some code here
    setTimeout("timedCount()",1000); //1000 milliseconds
}
</script>

Run that function ^ somehow (like with the onclick hander of a button as shown above) and it will loop forever, executing the function every 1000 ms

By the way, Java has nothing to do with Javascript. They're completely separate and are very different.

You can use CSS with Javascript to accomplish this easily like this:

<style>
.myImageClass { background-image: url(images/header.jpg); }
.extraClass { background-image: url(images/extra.jpg); }
</style>


<script type="text/javascript">
function changeMyBackground(elementID, myClassName = 'myImageClass'){
     document.getElementById(elementID).className=myClassName;
}

// Change BG of element with id bgImage with the default class 'myImageClass'
changeMyBackground('bgImage');

// or change the bg of the element with id bgImage using a custom class.
changeMyBackground('bgImage', 'extraClass');
</script>

Define an ID to the element like this:

<body id="bgImage">
    CONTENT
</body>

Is there a reason your not setting the background image in CSS?

Using jQuery is very easy, for example if you wanted to set a background on the body

$("body").css("background","url('images/bg.png')");

And don't forget to include jQuery in your header by:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

Maybe this will do:

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

var imageIndex = 0;
var imagesArray = new Array();

//Set Images
imagesArray[0] = "images/one.png";
imagesArray[1] = "images/two.png";
imagesArray[2] = "images/three.png";

function changeBackground(){
    $("body").css("background","url('"+ imagesArray[imageIndex] +"')");
    imageIndex++;
    if (imageIndex > imageArray.length)
        imageIndex = 0; 
}

$(document).ready(function() {
  setInterval("changeBackground()",5000);
});
</script>
</head>

To achieve a fade out transition to a new image you are better using an image tag . Inserting the new image with a lower z-index than the old image so it sits behind it. Next you fade out the old image and update the z-index of the new image.

I would recommend using JQuery cycle plugin (http://jquery.malsup.com/cycle/) because it will be easier for you to follow. Your code would therefore be:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src=”jquery.cycle.all.js” type=”text/javascript”></script>
<script type=”text/javascript”>
    $(document).ready(function() {
        $(‘.pics’).cycle({
        fx:    ‘fade’,
        speed:  5000
        });
    });
</script>
 </head>
<body>
<div class=”pics”>
    <img src=”image/one.png” />
    <img src=”image/two.png” />
    <img src=”image/three.png” />
</div>
</body>
</html>