마우스 오버 시 슬라이드 멈춤 효과 채택완료
$(function(){ n=1 $('.btn1').addClass('active') /*--동그라미가 선택될 때 빨간점으로--*/ $('').mouseover(function(){ n+=1 /*--1씩 증가--*/ if(n==5){ /*--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=4 /*--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==5){ n=1 } $('.gallery li').fadeOut(-20000)//hide() /*--2000은 2초--*/ (이미지넘어가는 시간) $('.img'+n).fadeIn(-10000)//show() (이미지넘어가는시간) $('.btngrp li').removeClass('active') $('.btn'+n).addClass('active')
}, 6000); //(이미지가멈춰있는시간)
$('.btngrp .btn1').click(function(){ $('.box_01').animate({'bottom':0}) }) $('.btngrp01 .btn2').click(function(){ $('.box_01').animate({'bottom':-460}) }) $('.btngrp01 .btn3').click(function(){ $('.box_01').animate({'bottom':-920}) })
$('.btngrp01 .btn4').click(function(){ $('.box_01').animate({'bottom':-1840}) })
})
여기서 어떤 것을 수정하거나 추가해야
마우스 오버 시 슬라이드 이미지가 멈추는지 알려주세요 ㅠㅠ
답변 1개
mouseover일경우 clearInterval() 함수로 이미지 슬라이드 중지
mouseleave 일경우 setInterval() 함수로 이미지 슬라이드 재 시작
on(event)를 잘 활용하셔서 작업하시면 될 듯 합니다
어려우시다면 제작의뢰에 글 한번 써보세요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
