<script>
$(function () {
var len = $('.fadeslide').length
var i = $('.fadeslide.on').index()
console.log(len, i)
var stop = 0
$('.pointer li').click(function () {
i = $(this).index()
showslide(i)
})
$('a.next').click(function (e) {
e.preventDefault();
showNext()
})
function showNext(){
if (i == len - 1) {
i = 0
} else {
i += 1
}
showslide(i)
}
$('a.prev').click(function (e) {
e.preventDefault();
if (i == 0) {
i = len - 1
} else {
i -= 1
}
showslide(i)
})
function showslide(index) {
$('.pointer li').removeClass('on');
$('.pointer li').eq(index).addClass('on');
$('.fadeslide').fadeOut();
$('.fadeslide').eq(index).fadeIn();
}
$('.fadeWrap').mouseenter(function(){ // .fadeWrap에 마우스 올리면 자동회전을 멈추게 하자
clearInterval(stop)
})
$('.fadeWrap').mouseleave(function(){ // .fadeWrap에 마우스가 없으면(떠나면)
stop = setInterval(showNext,1000) // 3초마다 자동으로 돌아가게 해라
})
})
</script>
'얼렁뚱땅코드 > jquery' 카테고리의 다른 글
| 얌샘김밥 원형 메뉴 돌리기 (0) | 2019.10.22 |
|---|---|
| 참고사이트 - css easing generator css 애니메이션 부드럽게 쓰기 (0) | 2019.10.22 |
| 얌샘김밥 예제 (0) | 2019.10.22 |
| 왼쪽오른쪽 색 다르게 하기 (0) | 2019.10.15 |
| sticky예제_밤도깨비야시장 스크롤 내릴때마다 네비 배경 바꾸기 (0) | 2019.10.15 |