마우스 오버 시 이미지 정지 효과 질문
본문
<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); //(이미지가멈춰있는시간)
})
마우스를 올리면 이미지가 멈춰있게 하는 효과를 주고싶은데 어떻게하나요??? 어떤 걸 추가해야하는 지 알려주세요~ ㅠㅠ