当前位置： 文江博客话题详情

背景图像/颜色改变

发布于 2024-11-29 22:29:50 字数 1118 浏览 0 评论 0原文

作为我的网站项目的一部分，我想添加一个脚本、javascript 或其他任何内容来更改背景图像，但问题是，我不知道如何使用 Java 进行编程。我只知道Lua，HTML，& 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">
原文

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

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

故事↓在人 2024-12-06 22:29:50

这会做到这一点：

<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处理程序一样），它将永远循环，每 1000 毫秒执行一次函数

顺便说一句，Java 与 Javascript 无关。它们是完全独立的并且非常不同。

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.

回复 原文
江南烟雨〆相思醉 2024-12-06 22:29:50

您可以使用 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>

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>
回复 原文
罗罗贝儿 2024-12-06 22:29:50

你没有在 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>

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>
回复 原文
~没有更多了~

关于作者

剪不断理还乱

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苦中寻乐

文章 0 评论 0

lueluelue

文章 0 评论 0

嗼ふ静

文章 0 评论 0

王权女流氓

文章 0 评论 0

与花如笺

文章 0 评论 0

残酷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文