마우스 오버 시 이미지 정지 효과 질문

마우스 오버 시 이미지 정지 효과 질문

QA

마우스 오버 시 이미지 정지 효과 질문

본문

  <div id="visual"><!--visual-->
  
   <div class="gallery">
   
    <ul class="box_01">
     <li class="img1"><a href="#"><img src="image/main/visu01.jpg"  class="img1"></a></li>
     <li class="img2"><a href="#"><img src="image/main/visu02.jpg"  class="img2"></a></li>
     <li class="img3"><a href="#"><img src="image/main/visu03.jpg"  class="img3"></a></li>
     <li class="img4"><a href="#"><img src="image/main/visu04.jpg"  class="img4"></a></li>
     <li class="img5"><a href="#"><img src="image/main/visu05.jpg"  class="img5"></a></li>
    </ul>
    
   </div>
   
   <ul class="btngrp">
     <li class="btn1" data-n="1"><p>ㄴㄴㄴㄴㄴ</p></li>
     <li class="btn2" data-n="2"><p>ㄴㄴㄴㄴㄴ</p></li>
     <li class="btn3" data-n="3"><p>ㄴㄴㄴㄴ</p></li>
     <li class="btn4" data-n="4"><p>ㄴㄴㄴㄴ</p></li>
     <li class="btn5" data-n="5"><p>ㄴㄴㄴㄴㄴ</p></li>
   </ul>
   
   
     
         
  </div><!--visual-->





$(function(){
 n=1  
 $('.btn1').addClass('active') /*--동그라미가 선택될 때 빨간점으로
               (or activet설정)--*/
 
 $('').mouseover(function(){
  n+=1 /*--1씩 증가--*/
  if(n==6){ /*--6번째가 될 때에는 (n=11로 돌아감)--*/
   n=1
  }
  $('.gallery li').fadeOut()//hide()
  $('.img'+n).fadeIn()//show()
  
  $('.btngrp   li').removeClass('active')
  $('.btn'+n).addClass('active')
  })//next End 
  
 $('').mouseover(function(){
  n-=1
  if(n==0){
   n=5 /*--3장일 때는 3--*/
  }
  $('.gallery li').fadeOut()//hide()
  $('.img'+n).fadeIn()//show()
  
  $('.btngrp   li').removeClass('active')
  $('.btn'+n).addClass('active')
  })//prev End
 
 $('.btngrp   li').mouseover(function(){
  n = parseInt($(this).attr('data-n'))
  $('.gallery li').fadeOut(-10000)//hide()(이미지넘어가는시간)
  $('.img'+ n).fadeIn(-10000)//show() (이미지넘어가는시간)
  $('.btngrp   li').removeClass('active')
  $('.btn'+ n ).addClass('active')
  })
    
  
       
        setInterval(function runslide() {  
            n+=1
   if(n==6){
    n=1
   }
   $('.gallery li').fadeOut(-20000)//hide() /*--2000은 2초--*/ (이미지넘어가는 시간)
   $('.img'+n).fadeIn(-10000)//show() (이미지넘어가는시간)
   $('.btngrp   li').removeClass('active')
   $('.btn'+n).addClass('active')
   
   }, 6000); //(이미지가멈춰있는시간)


 


})








마우스를 올리면 이미지가 멈춰있게 하는 효과를 주고싶은데 어떻게하나요??? 어떤 걸 추가해야하는 지 알려주세요~ ㅠㅠ 





이 질문에 댓글 쓰기 :

답변 1

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

회원로그인

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