Question

作为我的网站项目的一部分，我想添加一个脚本，javascript或其他，改变背景图像，但问题是，我不知道如何用Java编程。我只知道Lua，HTML和＆amp; CSS。

之所以这样，是因为我希望背景图像在5秒后变化（淡入另一个图像），然后再变为另一个图像。循环。

我找到了一些东西，但据说它不起作用：

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

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

Answer 1

这样做：

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

或者，如果您希望在点击某些内容时发生这种情况：

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

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

要在计时器上进行一些代码循环：

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

以某种方式运行该函数（就像上面显示的按钮的onclick hander一样）它将永远循环，每1000毫秒执行一次函数

顺便说一句，Java与Javascript无关。它们是完全分开的，而且非常不同。

Answer 2

您可以使用CSS和Javascript轻松完成此操作：

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

为元素定义ID，如下所示：

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

Answer 3

你有没有在CSS中设置背景图片的原因？

使用jQuery非常简单，例如，如果你想在身体上设置背景

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

不要忘记在标题中包含jQuery：

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

也许会这样做：

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

要实现淡出过渡到新图像，最好使用图像标记。使用比旧图像更低的z-index插入新图像，使其位于其后面。接下来，淡出旧图像并更新新图像的z-index。

我建议使用JQuery循环插件（http://jquery.malsup.com/cycle/），因为它更容易让您关注。因此，您的代码将是：

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

背景图像/颜色变化

3 个答案: