스크립트문제? 메인이미지 도와주세요ㅠ

스크립트문제? 메인이미지 도와주세요ㅠ

QA

스크립트문제? 메인이미지 도와주세요ㅠ

본문

 

아래 사진을 보면 첫번째사진에서 두번째사진으로 바뀔때

두번째사진이 아래로 비춰지면서 밀어냈다가 바뀝니다ㅜ

뭐때문인지 알수가 없네요 ㅠ

 

 

- 정상화면

 

ad37f2cbdac0b0080def3ef5c335cedd_1495168153_3923.jpg

 

 

 

- 장면이 바뀔때 모습

 

ad37f2cbdac0b0080def3ef5c335cedd_1495168189_0643.jpg

 

 

 

 

 

캡처한것이라 상단메뉴는 보이지만 그건 무시하셔도 됩니다.

 

<section id="main_slide">
 <div class="slide">
  <ul class="slide_ul">
   <li><a href="#"><img src="<? echo G5_THEME_IMG_URL; ?>/bgimg3.jpg" alt="dane"></a></li>
   <li><a href="#"><img src="<? echo G5_THEME_IMG_URL; ?>/bgimg4.jpg" alt="dane"></a></li>
  </ul>

  </div>
</div>

 

이미지가 있는 부분이구요~

 

js 부분입니다.

 

// JavaScript Document


$(document).ready(function() {
 
 var current=0;
 var slide_length = $('.slide_ul>li').length;//이미지의 갯수를 변수로
 var btn_ul = '<ul class="slide_btn"></ul>';//버튼 LIST 작성할 UL
 


 $('.slide_ul>li').hide();//이미지 안보이게
 $('.slide_ul>li').first().show();//이미지 하나만 보이게
 
 
 $(btn_ul).prependTo($('.slide'))//slide 클래스위에 생성
 for (var i = 0 ; i < slide_length; i++){//동그라미 버튼 생성 이미지 li 개수 만큼
  var child = '<li><a href="#none">'+i+'</a></li>';
  $(child).appendTo($('.slide_btn'));
 }
 
 $('.slide_btn > li > a').first().addClass('active'); 
 $('.slide_btn > li > a').on('click' , slide_stop);
 
//자동 슬라이드 함수
function autoplay(){
 
 if(current == slide_length-1){
 current = 0;
}else{
 current++;
}
 $('.slide_ul>li').stop().fadeOut(900);
 $('.slide_ul>li').eq(current).stop().fadeIn(700);
 $('.slide_btn > li > a').removeClass('active'); 
 $('.slide_btn > li > a').eq(current).addClass('active'); 
}
setInterval(autoplay,5000);//반복

//버튼 클릭시 호출되는 함수
function slide_stop(){
  var fade_idx = $(this).parent().index();
  current = $(this).parent().index();//클릭한 버튼의 Index 를 받아서 그 다음 이미지부터 슬라이드 재생.
  if($('.slide_ul > li:animated').length >= 1) return false; //버튼 반복 클릭시 딜레이 방지
  $('.slide_ul > li').fadeOut(400);
  $('.slide_ul > li').eq(fade_idx).fadeIn(400);
  $('.slide_btn > li > a').removeClass('active'); 
  $(this).addClass('active');
  
 } 
});

 

 

 

 

 

이건 css부분입니다.

 

 

/*메인슬라이드 이미지*/

#main_slide ul, li{
 margin:0;
 padding:0;
 list-style:none; 

  
}


#main_slide >ul> li{
  overflow: hidden;
}

#main_slide {
 margin:0 auto;
 text-align:center;
 position:relative;
 top:0;
 
}

.main_txt {
 position:absolute;
 z-index: 999;
 width:100%; 
}

 

.main_txt .col-sm-12 {
 width:100%;
 text-align:center;
 margin-top: 220px;
 color:#FFF;
}

 


@media (min-width:992px) {
#main_slide .slide img {
 width:100%;
 height: 100vh;

 
}
.main_txt .col-sm-12 h1 {
 font-size: 70px;
}

}
/*모바일*/
@media (max-width:991px) {
 #main_slide .slide {
      height: 490px; 
     overflow:hidden;
  position:relative;
}
#main_slide .slide img {
 width:1152px;
 height:450px;
 margin-left:-30%;
 margin-top:90px;
 overflow:hidden;
  
}
.main_txt .col-sm-12 {
 display:none;
}

 

 
}

 

 

 

 

 

 



 

이 질문에 댓글 쓰기 :

답변 1

사이트를 직접보아야 현상을 알 수 있겠죠.

코드 분석하는 시간보다 보는 것이 매우 빠른 문제해결에 도움이 됩니다.

사용하신 코드에서 슬라이드 아이템인 li 요소들의 포지셔닝을 absolute로 지정하시고 위치조정을 다시 해보시거나 fadeIn fadeOut의 시간 조정을 다시 해보세요.

현재는 jquery의 fadeOut, fadeIn 코드를 사용하셨는데 이는 일종의 애니메이션 효과이지요.
서서히 사라지거나 서서히 나타난 후에야 display: none, display:block이 적용됩니다.
말씀하셨듯이 밀려나는 현상은 이전 아이템이 fadeOut이 끝나 display:none 이 되기전에 현재 아이템이 fadeIn 되기 시작해서 나타나는 현상이죠.

해당 아이템들의  li 요소에는 다른 어떤 스타일도 입히지 않으셨기에 기본형인 블럭형으로 바로 아래 쌓이게 되는 거고요.


추가적으로 말씀을 드리자면, 기본 소스를 직접 짜보는 것은 매우 도움이 많이 되지만 실제 서비스가 목적인 사이트라면 이미 검증된 슬라이드 및 캐러젤 플러그인들중에 하나를 사용하시는 것이 안정성이 더 높을겁니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 773
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT