带有Javascript动画背景的HTML如何获得div？_Javascript_Css_Html

带有Javascript动画背景的HTML如何获得div？

javascript css html

带有Javascript动画背景的HTML如何获得div？,javascript,css,html,Javascript,Css,Html,我的问题是我有一个Javascript动画背景（只有3张图片）我想展示一些有内容的Div 我在atm机上得到了这个密码：在我的css中，我得到了divs内容的内容，但它本身不会显示在javascript上变量 images=[“11.jpg”、“22.jpg”、“33.jpg”]//图像列表，imgToCHange=document.getElementById（'change me'），间隔=1000//，单位为毫秒 ; setInterval（函数（）{ images.unsh

我的问题是我有一个Javascript动画背景（只有3张图片）我想展示一些有内容的Div

我在atm机上得到了这个密码：在我的css中，我得到了divs内容的内容，但它本身不会显示在javascript上


变量
images=[“11.jpg”、“22.jpg”、“33.jpg”]//图像列表
，imgToCHange=document.getElementById（'change me'）
，间隔=1000//，单位为毫秒
;
setInterval（函数（）{
images.unshift（images.pop（））；
imgToCHange.src=图像[0]；
}，间隔）；

问题是（如果我正确理解您的问题的话）您试图在图像上放置div。您需要设置一个div的背景图像（我想在您的例子中是“hoi”），然后该div可以包含所有其他div。在演示中，我只是删除了您的图像，并在“hoi”div上设置了图像样式（并添加了一个蓝色边框，以便您可以看到），然后我更新了JavaScript，以便它更新背景图像。这应该可以很好地处理您的图像

查看我的jsbin演示

HTML

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

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

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