사이클 라이트가 시작될 때 위치가 엉망이 됨

Question

편집 : 어떻게 든 나는 2 일간이 작업을 망쳐 놓은 후, 여기에 게시 한 후에 알아낼 수 있다는 것을 알았습니다. 미래의 참고를 위해, 자동차는 높이와 너비에 대한 어떤 이유로 작동하지 않는 것 같습니다. 사이클 플러그인에서 수동으로 정의하고 다른 크기의 이미지를 사용하는 경우 파인더 함수를 사용하여 최대 값을 찾습니다. 이것은 작동하는 것처럼 보이지만 누군가가 '자동'작업을 다시 시작할 수있는 해결책이 있다면 나는 그것을 좋아할 것입니다. 이것에 공간을 낭비해서 죄송합니다!

작동 사이클 코드 :

$('.fadeit').cycle({ 
    fx:  'fade', 
    *width: 240, 
    *height: 320, 
    speed: 300, 
    timeout: 3000, 
    next: '.fadeit', 
    pause: 1 , 
    slideExpr: 'img.andy' 
}); 

이 문제 내가 다른 사람이 본 것, 내가 전에 가졌던 및 해결입니다. 불행하게도, 이전에 작동했던 것처럼 보이는 '수정'을 사용한 후에도 다시 나타났습니다 (절대 위치 및 왼쪽 또는 오른쪽으로 위치 지정). 내 페이지로드가 시작되면 텍스트가 이미지의 옆에 나타납니다. Cycle-Lite가 시작되면 텍스트가 슬라이드 쇼의 아래 (z- 인덱스가 낮아 보이는 것처럼)로 이동하므로 숨겨집니다. 그것은 내가 사용하는 CSS 설정이 중요하지 않는 것,하지만 그것은 문제가 있어야합니다. 전체주기 플러그인이 작동한다고 들었지만 본문의 일부만 편집 할 수 있으며 cycle-lite는 머리에 미리 포함되어 있습니다. 또한 필자는 항상이 글을 쓰는 사람이 아니기 때문에 'This text is some text'를 변경할 수는 없습니다. 이것은 도서관에 들어가기는하지만, 먼저 소규모로 작업하지 않고는 그것을 넣을 수는 없습니다.

내 코드 :

<div height="320" width="240" style="position:relative; float:left; padding:5px;" id="thisisit" class="fadeit"> 
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" style="position:relative; display:none; float:left; padding:5px;" class="andy" /> 
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" style="position:relative; display:none; float:left; padding:5px;" class="andy" /> 
<img alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg" style="position:relative; visibility:visible; float:left; padding:5px;" class="andy"/> 
<script language="javascript" type="text/javascript"> 

window.onload=function() { 
var aclass = '.' + 'andy'; 
$(aclass).css('display','inline'); 

$('.fadeit').cycle({ 
    fx:  'fade', 
    speed: 300, 
    timeout: 3000, 
    next: '.fadeit', 
    pause: 1 , 
    slideExpr: 'img.andy' 
}); }; 

</script> 
</div> 
This is some text. 

Answer 1

width: 'auto'주기 라이트 따라서 흐름에서 제거하고 .fadeit의 효과적인 자동 폭을 제공 .fadeit의 각 하위 요소를 받아 절대 위치에 넣습니다 때문에 여기에 작동하지 않습니다 0 (나는 이전 '수정'일 듯 한 이유를 알 수는 없습니다 수레와 절대 위치가 혼합하지 않습니다.) 내가 <div class="fadeit"> 법적하지 height 및 width 특성이 있습니다 것으로 나타났습니다

<div>. 그러나 (style="width: 240px; height: 320px; ...") style 속성의 치수로 바꾸면 원본 JS가 (너비와 높이가 하드 코딩되지 않은 채로) 작동합니다. HTML/CSS에서 하드 코딩하는 것이 JS보다 나은지 여부는 알 수 없지만 제공 한 샘플 코드를 기반으로 판단 할 수 있습니다.

샘플 코드에서 많은 CSS가 발견되었습니다 (예 : position: relative, .fadeit, cycle-lite가이를 수행 할 때, 어린이 이미지의 중복 수레 등). 제안 된 코드는 다음과 같습니다.

<div style="float: left; padding: 5px; height: 320px; width: 240px;" id="thisisit" class="fadeit"> 
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" style="display: none;" class="andy" /> 
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" style="display: none;" class="andy" /> 
<img alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg" class="andy"/> 
<script language="javascript" type="text/javascript"> 

window.onload=function() { 
var aclass = '.' + 'andy'; 
$(aclass).css('padding':'5px'); 

$('.fadeit').cycle({ 
    fx:  'fade', 
    speed: 300, 
    timeout: 3000, 
    next: '.fadeit', 
    pause: 1 , 
    slideExpr: 'img.andy' 
}); }; 

</script> 
</div> 
This is some text. 

죄송합니다. 아마도 귀하가 원하던 답변이 아닙니다.