jQuery Cycle 페이지로드시 슬라이드가 겹침

많은 프로젝트에서 jQuery Cycle을 사용했습니다. 이번에는 정말 기괴한 시각적 결함을 얻고 있습니다. 페이지로드시 모든 슬라이드가 서로 위에 표시되고 스크립트가 각 슬라이드를 순환하므로 결국 페이지가 다시로드 될 때까지 자체적으로 수정됩니다. 예와 코드는 here을 클릭하십시오. 아래 이미지는 점에서 문제를 "해결"않습니다 각 슬라이드 div에 배경 색상을 추가 (파이어 폭스 4, 사파리 5, 크롬 10, IE8에서 테스트)jQuery Cycle 페이지로드시 슬라이드가 겹침

enter image description here 모든 브라우저에서 어떤 일이 일어나고있는 것 같다 글리치를 보여줍니다 그것은 다른 슬라이드를 숨 깁니다. 그러나 제 생각에는 적절한 해결책이 아닙니다.

오후 내내이 전투에 참전했고 나는 약간의 상처를 입었습니다. 어떤 도움이라도 대단히 감사하겠습니다.

감사합니다.

출처

2011-04-22 Adrian Trimble

디스플레이 추가 : 없음; 페이지로드에 표시되지 않도록 슬라이드에 붙여 넣습니다.

출처

2011-04-22 23:52:49 Todd

안타깝게도 작동하지 않았습니다. 내 배경 색상 해킹을 해결할 수 있습니다. 노력해 주셔서 감사합니다! –

div 태그 사용 style = "display : none;" 한 명을 제외한 모든 사람들에게, 나는 그들에게 모두 공통된 계급 이름을주었습니다. 당신은 방금 전화 사업부의 아이들도 얻을 수 있습니다. 로드시 "display : inline"으로 변경하십시오. 표시 할 수있는 것은 표시가없는 것 : 없음입니다. IMG 태그를 사용하여

예, 같은 원리 :

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

<script language="javascript" type="text/javascript"> 

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

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

</script></div>

출처

2011-05-20 21:44:38 Truk

당신은

head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js", "js/jquery.cycle.lite.min.js", function() { 
     $('#featured').cycle(); 
});

또는 단지가 head.js 페지 head.js의 콜백 jQuery를주기에 전화를 넣어 안 html5/css3을 사용하지 않는 것으로 보시겠습니까?

출처

2011-05-21 19:00:13 addedlovely

나는 그것이 사용자 정의 전환을 사용했다가,이 그것이 사용되는 직전 항목을 표시합니다 ..... 뭔가를 추가 어쩌면 첫 번째 제외한 모든에

jQuery(document).ready(function($) { 

$('.fade').cycle({ 
fx: 'custom', 
cssBefore: { top: 420, display: 'inline' }, 
animIn: { top: 0 }, 
animOut: { top: -420 } 
}); });

을 없음으로 표시를 설정!

출처

2011-08-17 13:07:34 Tom

나는 똑같은 문제가 있었지만 각 슬라이드를 표시하도록 Truk의 대답에 따라 해결했습니다 : 첫 번째 예외는 제외하고 페이지로드시 인라인으로 표시하도록 변경하는 대신 주기적으로 수행합니다 다음과 같이 호출하십시오.

$(document).ready(function(){ 
    $('#header-content').cycle({ 
     fx: 'custom', 
      cssBefore: { left: 384, display: 'block' }, 
      animIn: { left: 0}, 
      animOut: { left: -384 } 
    }); 
})

희망이 있으면 다른 사람이 도움이됩니다.

출처

2011-11-10 05:45:37 Chris

jQuery Cycle 페이지로드시 슬라이드가 겹침

답변

관련 문제