Designer · Publisher
[제이쿼리] slider carousel 본문
1. next버튼
- 2번 이미지(뒷면)가 나오도록 설정
- next버튼을 클릭할때마다 1칸씩 이동 (변수 n값 사용)
- 끝까지 가면 처음으로 돌아가도록(if문)
2. prev버튼
- 2번 이미지(뒷면)가 나오도록 설정
- next버튼을 클릭할때마다 1칸씩 이동 (변수 n값 사용)
- 끝까지 가면 처음으로 돌아가도록(if문)
3. indi버튼
- li를 클릭했을 때 해당하는 이미지 나오도록
- 클릭한 li색상 변경
- 처음 이미지 li색상 변경
- nest/prev버튼 클릭했을 때 같이 색상 변경
4. page
- 전체페이지
5. 자동롤링(setInterval)
- 마우스를 올렸을 때 멈추고, 벗어났을 때 다시 실행
- 정지 버튼을 클릭했을 때 멈추고, 재생버튼을 클릭했을 때 다시 실행
$(function(){
//5. 자동롤링(setInterval) 시작
var rolling = setInterval(function(){
$('#next').click()
},2000)
/* 01_마우스를 올렸을 때 멈추고, 벗어났을 때 다시 실행
$('.slider').mouseover(function(){
clearInterval(rolling)
})
$('.slider').mouseout(function(){
rolling = setInterval(function(){
$('#next').click()
},2000) // 절대 var 붙이지 않는다
})
*/
//02_정지 버튼을 클릭했을 때 멈추고, 재생버튼을 클릭했을 때 다시 실행
$('#btnAuto').click(function(){
//if(클릭한 버튼이 stop이라면)
if($('img',this).attr('src') == 'img/stop-icon.png'){
clearInterval(rolling)//롤링을 멈추고
$('img',this).attr('src','img/play-icon.png') //이미지가 재생버튼으로 변경
}else{
rolling = setInterval(function(){
$('#next').click()
},2000) //롤링을 다시 시작
$('img',this).attr('src','img/stop-icon.png') //이미지가 정지버튼으로 변경
}
})
//5. 자동롤링(setInterval) 종료
//4. page 시작
var allpage = $('.icon li').size()
$('.aPage').text(allpage)
//4. page 종료
//3. indi 시작
//$('.icon li:first').css({color:'skyblue'})//처음 이미지 li색상 변경
$('.icon li').click(function(){
n = $(this).index()//index 클릭한 것 숫자
$('.img_wrap').stop().animate({left:-782 * n})
$('.icon img').attr('src','img/ico_slider.png')//클릭한 li 원복
$('img',this).attr('src','img/ico_slider_on.png')//클릭한 li _on변경
$('.cPage').text(n+1)
})
//3. nidi 종료
var n = 0
$('#next').click(function(){
n++
if(n==4){
//img_wrap을 맨앞으로 순간이동 시키고 롤링
$('.img_wrap').css({left:-782 * 0})
n=1
}
$('.img_wrap').stop().animate({left:-782 * n})
$('.icon li img').attr('src','img/ico_slider.png')
$('.icon .icon'+(n+1)+' img').attr('src','img/ico_slider_on.png')
$('.cPage').text(n+1)// !! if문 앞에 있어야함
if(n==3){
$('.icon .icon1 img').attr('src','img/ico_slider_on.png')
$('.cPage').text('1')
}
/*
$('.icon li').css({color:'#333'})//클릭한 li색상 변경
$('.icon .icon'+(n+1)).css({color:'skyblue'})//nest/prev버튼 클릭했을 때 같이 색상 변경
if(n==3){
$('.icon .icon1').css({color:'skyblue'})
}
*/
})
$('#prev').click(function(){
n--
if(n==-1){
$('.img_wrap').css({left:-782 * 3})
n = 2
}
$('.img_wrap').stop().animate({left:-782 * n})
$('.icon li img').attr('src','img/ico_slider.png')
$('.icon .icon'+(n+1)+' img').attr('src','img/ico_slider_on.png')
$('.cPage').text(n+1)
/*
$('.icon li').css({color:'#333'})
$('.icon .icon'+(n+1)).css({color:'skyblue'})
*/
})
})
</script>
'M' 카테고리의 다른 글
| [제이쿼리] for반복문(for(){}, new Array('')) (0) | 2017.07.09 |
|---|---|
| [제이쿼리] 클릭하면 이미지 변경 (0) | 2017.06.24 |
| [제이쿼리] 부등호연산자, if조건문 (0) | 2017.06.24 |
| [자바스크립트&제이쿼리] 매개변수_body좌표값 추출, TOOLTIP (0) | 2017.06.10 |
| [HTML] form 구성 방법 (0) | 2017.06.05 |