2011-09-12 2 views
1

이미지 src를 대체 할 간단한 코드가 있습니다. 올바르게 작동하지만 이미지가 업데이트 될 때마다 브라우저가 페이지 맨 위로 건너 뜁니다.Javascript - 브라우저가 이미지 변경시 페이지 맨 위로 건너 뜁니다.

내 페이지에 이미지 태그가 여러 개 있습니다. 첫 번째 것을 제외하고 모두 숨겨져 있습니다. 이 스크립트는 이미지를 반복하고 src 특성을 사용하여 첫 번째 이미지를 업데이트합니다. 여기

나는 코드를 사용하고 있습니다 : 그것은 원인이 될 수있는 어떤

var j = jQuery.noConflict(); 
var count = 1; 
var img; 

function update_main_image() 
{ 
    count++; 

    if (j('#main_image_picture_'+count).length > 0) 
    { 
     img = j('#main_image_picture_'+count).attr('src'); 
    } 
    else 
    { 
     count = 1; 
     img = j('#main_image_picture_'+count).attr('src'); 
    }  

    j(".main_image_picture_auto").fadeOut(1500, function() { 
     j(this).fadeIn(); 
     j(this).attr("src", img); 
    });  
} 


j(document).ready(function() 
{ 
    setInterval(update_main_image, 6000);  
}); 

어떤 아이디어? 조언을 주시면 감사하겠습니다.

감사합니다. 당신의 IMG.main_image_picture_auto와 폭높이 스타일의 숙소에 주위에 DIV를 추가 할 수

+2

JSFiddle.net에 코드를 모두 추가하고 여기에 링크를 게시 할 수 있습니까? 사람들이 너를 많이 도울 수있게 해줄거야. –

+0

'fadeIn'을 버리고 그냥 소스를 설정 한 후 보여주세요. 잘 작동합니까? –

답변

1

봅니다 예를 들어, 최대 추적 할 수없는 가망 이미지 크기에 걸렸고 :

<div style='width:400px; height:400px; border: 0px; background: transparent; '> 
    <img class='main_image_picture_auto' src=''/> 
</div> 
<!-- Where width:400px and height:400px is maximum allowed image size --> 

그리고 그 대신 setTimeout을 사용하는 것이 더 좋습니다, 생각 setInterval

function update_main_image() { 
    // .... 
    setTimeout(update_main_image, 6000);  
} 
j(document).ready(function() { 
    setTimeout(update_main_image, 6000);  
}); 

http://jsfiddle.net/UBEWS/

관련 문제