jQuery 슬라이드
웹사이트에서 제이쿼리를 이용한 슬라이드
폐쇄형으로 작업되었다. 즉, 이전, 다음 이미지가 보이지 않는 오로지 중앙에 이미지가 나올때 적합한 소스이다.
오픈된 슬라이드 메뉴가 아닌 폐쇄형 슬라이드다.
실행된 이미지
.wrap {width:400px; margin:0 auto; } .wrap .sliderWrap {width:400px; height:200px;overflow:hidden;} .wrap .slider:after {display:block; content:""; clear:both;} .wrap .slider {height:100%; width:1600px; position:relative;} .wrap .box {float:left; width:400px; height:100%; position: absolute; left:400px; top:0; font-size:20px; text-align: center; line-height:200px; color:#fff;} .wrap .box:nth-child(1){background:burlywood; } .wrap .box:nth-child(2){background:rebeccapurple} .wrap .box:nth-child(3){background:blue} .wrap .box:nth-child(4){background:green} .wrap .indicator {font-size:0; text-align:center; margin-top:10px;} .wrap .indicator a:first-child {margin-left:0;} .wrap .indicator a {display:inline-block; width:14px; height:14px; border-radius:8px; background: fuchsia; margin-left:5px;} .wrap .indicator a.on {background:blueviolet}
(function(){ var curIdx = 0; var $item = $('.box') var len = $item.length var $indicator = $('.indicator') $item.eq(0).css({ left : 0 }); function show(direc, hideIdx, showIdx){ console.log('hideIdx : ' + hideIdx + ' showIdx : ' + showIdx); //next $item.eq(hideIdx).animate({ left : (direc * -400) +"px" }); $item.eq(showIdx).css({ left : (direc * 400) + "px" }); $item.eq(showIdx).animate({ left : 0 }); $indicator.find('a').eq(showIdx).addClass('on').siblings().removeClass('on'); curIdx = showIdx; } setInterval(function() { var showIdx = curIdx + 1 if(len <= showIdx){ showIdx = 0 } show(1, curIdx, showIdx); }, 2000) $('.next').on('click', function(){ var showIdx = curIdx + 1 if(len <= showIdx){ showIdx = 0 } //next() show(1, curIdx, showIdx); }) $('.prev').on('click', function(){ var showIdx = curIdx - 1; if(showIdx < 0 ){ showIdx = len - 1 } //prev() show(-1, curIdx, showIdx) }); $('.indicator a').on('click', function(){ var idx = $(this).index(); // curIdx++ // console.log(curIdx) show(idx > curIdx ? 1 : -1, curIdx, idx); }); })();
sub's
Blog
'개발연습막쓰기 > jQuery' 카테고리의 다른 글
setInterval 타이머 (0) | 2018.12.09 |
---|---|
애트리뷰트 팝업 창 띄우기 (0) | 2018.11.01 |
jQuery 실행 파일의 위치 (0) | 2018.09.03 |
jQuery 의 사상 (0) | 2018.09.03 |
이미지 체인지 관련 (0) | 2018.05.16 |