Фоновое изображение / изменение цвета - PullRequest
Новая
       2

Фоновое изображение / изменение цвета

0 голосов
/ 17 августа 2011

В рамках своих проектов на веб-сайте я хотел бы добавить сценарий, 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">

Ответы [ 3 ]

1 голос
/ 17 августа 2011

Это будет сделано: 

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

Как-нибудь запустить эту функцию ^ (как с помощью кнопки на кнопке, как показано выше), и она будет зацикливаться вечно, выполняя функцию каждые 1000 мс

Кстати, Java не имеет ничего общего сделать с Javascript.Они совершенно разные и очень разные.

0 голосов
/ 17 августа 2011

Есть ли причина, по которой вы не устанавливаете фоновое изображение в 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-индексом, чем у старого изображения, чтобы оно находилось позади него.Затем вы затушевываете старое изображение и обновляете z-индекс нового изображения.

Я бы порекомендовал использовать плагин цикла 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>
0 голосов
/ 17 августа 2011

Вы можете использовать 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>

Определите идентификатор для элемента следующим образом: 

<body id="bgImage">
    CONTENT
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...