페이지가 처음으로 액세스 될 때 이미지가 모두 잠시 동안 회전합니다.

Question

해당 페이지에 대한 링크가 포함 된 간단한 회전 묶음 (총 5 개)을 만들려고합니다. 작동하는 것처럼 보이는 간단한 코드를 발견했지만 처음으로 페이지를로드 할 때 슬라이드 쇼가 시작되기 전에 초당 5 개의 이미지를 모두로드합니다. 페이지가 처음로드 될 때 다른 이미지를 숨기는 방법이 있습니까?

은 내 테스트 페이지가 여기에 있습니다 : http://www.northeastern.edu/test/coe/test.html

페이지는 더 큰 CMS의 일부와 I 페이지의 중앙에 파노라마 사업부에 편집하고있는 부분입니다. CMS 외부에서이 부분 만로드하려고하면 제대로 작동하는 것으로 보이지만 모두 함께 작동하지는 않습니다. 인라인 CSS를 사용하여 시작시 표시 될 수 없습니다

<div id="panoramic"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> 
     <script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js" ></script> 
     <script> 
     $('.rotator').cycle({ 
      speed: 500, 
      fx: 'fade', 
      timeout: 6000 
     }); 
     </script> 

     <div class="rotator"> 
     <div><p><a href="link0"><img alt="" src="header00.png" /></a></p></div> 
     <div><p><a href="link1"><img alt="" src="header01.png" /></a></p></div> 
     <div><p><a href="link2"><img alt="" src="header02.png" /></a></p></div> 
     <div><p><a href="link3"><img alt="" src="header03.png" /></a></p></div> 
     <div><p><a href="link4"><img alt="" src="header04.png" /></a></p></div> 
     </div> 
    </div> 

Answer 1

숨기기 모든 것들 :

이

내가 추가 한 코드입니다.

<div class="rotator"> 
    <div><p><a href="link0"><img alt="" src="header00.png" /></a></p></div> 
    <div style="display: none;"><p><a href="link1"><img alt="" src="header01.png" /></a></p></div> 
    <div style="display: none;"><p><a href="link2"><img alt="" src="header02.png" /></a></p></div> 
    <div style="display: none;"><p><a href="link3"><img alt="" src="header03.png" /></a></p></div> 
    <div style="display: none;"><p><a href="link4"><img alt="" src="header04.png" /></a></p></div> 
    </div> 

Answer 2

귀하의 문제는 대부분 CSS와 관련이 있습니다 ... 슬라이드 컨테이너 또는 슬라이드 요소에 대해 전혀 CSS를 설정하지 않았습니다. 페이지에서 자바 스크립트를 사용 중지하면 rotator 컨테이너가 콘텐츠의 높이까지 단순히 확장됩니다. 이것은 모두 CSS로 제어 할 수 있습니다.

현재 css가 즉시 처리되는 반면 페이지로드 프로세스에서 늦은 시간에 css를 설정하기 위해 페이지 준비 이벤트를 기다리고 있습니다.

슬라이드 컨테이너의 크기를 지정하십시오. 그런 다음 overflow:hidden을 추가하면 요소의 경계를 넘어서는 이미지를 볼 수 없습니다.

예 CSS 규칙은 스타일 시트에 배치 :이 일을

.rotator{ 
    width: 700px; 
    height:300px; 
    overflow:hidden; 
}