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

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

QA

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

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

본문

 

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

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

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

 

 

- 정상화면

 

ad37f2cbdac0b0080def3ef5c335cedd_1495168

 

 

 

- 장면이 바뀔때 모습

 

ad37f2cbdac0b0080def3ef5c335cedd_1495168

 

 

 

 

 

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

 

<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

흉내쟁이님의 답변

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

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

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 47,135 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울 강남구 강남대로 310, 1312호 (역삼동, 유니온센터) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT