여러 배경에 이미지

회전 이미지를 표시하도록 javascript/jquery를 설정하려고합니다. 실제로 여러 이미지 배경 위에 놓을 수있는 모든 것을 넣으려고합니다 ... 모의 배너를 만들 수 있었고 그것은 성공했지만 내 사이트에 정렬되지 않은 목록, 그림 또는 회전 이미지를 배치 할 수 없습니다.여러 배경에 이미지

내 HTML 내 CSS를

body { 
    background: url(/images/background-top.png) 0 0 repeat-x, 
     url(/images/menu.png) 0 160px repeat-x, 
     url(/images/background-middle.png) 0 210px repeat-x; 
    background-color: #dadada;   
} 

#massiveWrapper { 
    width: 1024px; 
    margin: auto; 
} 

#rotatingWrapper { 
    width: 1024px; 
    height: 200px; 
} 

.rotateImage { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
}

입니다

 <link rel="stylesheet" type="text/css" href="styles/main.css"> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <script src="/javascript/main.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div id="massiveWrapper"> 
      <div id="header"> 
       <img src="/images/banner.png" alt="banner" width="1024px" height="150px"/> 
      </div> 
      <div id="menu"> 
       <ul> 
        <li>hello</li> 
        <li>hello</li> 
       </ul> 
      </div> 
      <div id="rotatingWrapper"> 
       <img class="rotateImage" src="/images/blue.png" alt="Computers" width="1024px" height="200px" /> 
       <img class="rotateImage" src="/images/red.png" alt="Computers" width="1024px" height="200px" /> 
       <img class="rotateImage" src="/images/green.png" alt="Computers" width="1024px" height="200px" /> 
      </div> 
      <div> 
       <img src="/images/blue.png" alt="blue" width="1024px" height="200px"/> 
      </div> 
     </div> 
    </body> 
</html>

과 자바 스크립트는 대한

$(window).load(function() { //start after HTML, images have loaded 

    var InfiniteRotator = 
    { 
     init: function() 
     { 
      //initial fade-in time (in milliseconds) 
      var initialFadeIn = 1000; 

      //interval between items (in milliseconds) 
      var itemInterval = 5000; 

      //cross-fade time (in milliseconds) 
      var fadeTime = 2500; 

      //count number of items 
      var numberOfItems = $('.rotateImage').length; 

      //set current item 
      var currentItem = 0; 

      //show first item 
      $('.rotateImage').eq(currentItem).fadeIn(initialFadeIn); 

      //loop through the items 
      var infiniteLoop = setInterval(function(){ 
       $('.rotateImage').eq(currentItem).fadeOut(fadeTime); 

       if(currentItem == numberOfItems -1){ 
        currentItem = 0; 
       }else{ 
        currentItem++; 
       } 
       $('.rotateImage').eq(currentItem).fadeIn(fadeTime); 

      }, itemInterval); 
     } 
    }; 

    InfiniteRotator.init(); 

});

정말 회전 이미지를 가질 수 있도록하려면

나는 단지 캔트이다 내 삶은 새로운 것을 페이지에 추가합니다. 나는 심지어 div와 img를 사용하여 더미 그림을 추가했다. 그러나 그것은 또한 나타나지 않을 것이다. .. 이것은 아마도 작지만 나는 코딩에 익숙하지 않은 무언가 일 것이다. 케인은

출처

2014-04-21 user3558347

당신은 이미지의 width 및 height 속성에 px를 추가해서는 안

예 :

<img src="/images/banner.png" alt="banner" width="1024px" height="150px"/>

는 같아야

<img src="/images/banner.png" alt="banner" width="1024" height="150"/>

출처

2014-04-21 23:56:52 mhu

여러 배경에 이미지

답변

관련 문제