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

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

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

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

본문

 

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

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

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

 

 

- 정상화면

 

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 요소에는 다른 어떤 스타일도 입히지 않으셨기에 기본형인 블럭형으로 바로 아래 쌓이게 되는 거고요.


추가적으로 말씀을 드리자면, 기본 소스를 직접 짜보는 것은 매우 도움이 많이 되지만 실제 서비스가 목적인 사이트라면 이미 검증된 슬라이드 및 캐러젤 플러그인들중에 하나를 사용하시는 것이 안정성이 더 높을겁니다.
zes님의 댓글
아~ 감사합니다//
화면에 꽉차게 100%로 안겹치고 작동되는걸 찾는게 쉽지 않네요 ㅠㅠ

혹시  검증된 슬라이드 및 캐러젤 플러그인 다운받을수 있는 사이트
아시는곳 몇군데 추천해주실수 있나요?
답변을 작성하시기 전에 로그인 해주세요.
전체 54,820 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중인 포인트경매

  1. 첨단보안 역해킹과 해커박스

    참여9 회 시작17.12.15 10:22 종료17.12.20 10:22
  2. 홈플러스 모바일 쿠폰 50,000원

    참여77 회 시작17.12.13 22:51 종료17.12.18 22:51
  3. MySQL Advanced Class (그누보드5는 MySQL을 사용합니다.)

    참여14 회 시작17.12.13 10:17 종료17.12.18 10:17

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT