HTML с Javascript анимированный фон, как получить div на нем?

Question

HTML с Javascript анимированный фон, как получить div на нем?

0

моя проблема в том, что у меня есть анимированный фон Javascript (всего 3 картинки) И я хочу показать некоторое Div на нем с контентом на нем.

Я получил этот код atm: В моем css я получил материал для контента divs, но он не будет отображаться на javascript сам

<head>

    <title></title>
    <link href="rekensite.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="main">

            <div class="hoi">
            <img id="change-me" src='w1.jpg' style="width:99%;height:99%" alt='[]' />
            <div class="main">
            <div class="Back">
    <div class="header">
    <div class="menu">
    <div class="content">


        <script>

        var
            images = [ "11.jpg", "22.jpg", "33.jpg" ] //the list of images
          , imgToCHange = document.getElementById( 'change-me' )
          , interval = 1000 //in ms
          ;

        setInterval( function(){
          images.unshift( images.pop() );
          imgToCHange.src = images[0];
         }, interval );

        </script>


        </div>
        </div>
        </div>
        </div>
        </div></div>
<div class="Bottom"><br/> </div>
</body>

user2991218 05 дек. 2013, в 09:12

Источник

Теги:

javascript

html

css

1 ответ

Ещё вопросы

guymid · Answer 1 · 2013-12-05T07-07-00.000Z

Проблема в том, что (если я правильно понимаю ваш вопрос), что вы пытаетесь поместить div на изображение. Вам нужно установить фоновое изображение div ("hoi" в вашем случае, я думаю), а затем этот div может содержать все остальные div. В демонстрации я просто удалил изображение и установил стиль изображения на div "hoi" (и добавил синюю рамку, чтобы вы его увидели), а затем я обновил JavaScript, чтобы он обновлял фоновое изображение. Это должно хорошо работать с вашими изображениями.

Смотрите мою демонстрацию jsbin здесь.

HTML

<div class="hoi" id="change-me" style="width:99%;height:99%;border:1px solid blue">
            This is where the image was
            <div class="main">main
            <div class="Back">back
    <div class="header">Header
    <div class="menu">menu
    <div class="content">content
</div></div></div></div></div></div>

JavaScript:

var
    images = [ "11.jpg", "22.jpg", "33.jpg" ] //the list of images
  , imgToCHange = document.getElementById( 'change-me' )
  , interval = 1000 //in ms
  ;

setInterval( function(){
  images.unshift( images.pop() );
  imgToCHange.style.backgroundImage = "url(" + images[0] + ")";
 }, interval );