jQuery left right clone gallery
2021. 12. 15. 13:23ㆍStudy/jQuery
CSS
@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
ul, li{list-style:none;}
#slide_gallery_box{position:relative; width:750px; border:3px solid #CCC; overflow:hidden;}
#slide_gallery_box .slide_gallery{position:relative; left:0; top:0; width:1500px; overflow:hidden;}
#slide_gallery_box .slide_gallery ul{float:left;}
#slide_gallery_box .slide_gallery ul li{float:left;}
#slide_gallery_box .sub_menu_box{position:relative; left:340px; width:70px; overflow: hidden;}
#slide_gallery_box .sub_menu_box .button{display: block; float: left;}
#slide_gallery_box .sub_menu_box .m1{ margin-right:20px;}
JS
// JavaScript Document
$(document).ready(function() {
var position=0; //최초위치
var movesize=150; //이미지 하나의 너비
//var timeonoff;
$('.slide_gallery ul').after($('.slide_gallery ul').clone()); // 복제
/*
timeonoff= setInterval(function () {
position-=movesize; // 150씩 감소
$('.slide_gallery').stop().animate({left:position}, 'fast',
function(){
if(position==-750){
$('.slide_gallery').css('left',0);
position=0;
}
});
}, 2000);
*/
$('.button').click(function(e){
e.preventDefault();
//clearInterval(timeonoff);
if($(this).is('.m1')){
if(position==-750){
$('.slide_gallery').css('left',0);
position=0;
}
// position-=movesize; // 150씩 감소
// $('.slide_gallery').stop().animate({left:position}, 'fast',
// function(){
// if(position==-750){
// $('.slide_gallery').css('left',0);
// position=0;
// }
// });
}else if($(this).is('.m2')){
if(position==0){
$('.slide_gallery').css('left',-750);
position=-750;
}
// position+=movesize; // 150씩 증가
// $('.slide_gallery').stop().animate({left:position}, 'fast',
// function(){
// if(position==0){
// $('.slide_gallery').css('left',-750);
// position=-750;
// }
// });
}
});
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/NBSlide.css" rel="stylesheet">
<script src="js/jquery-1.7.1.min.js"left:></script>
<script src="js/NBSlide.js"left:></script>
</head>
<body>
<div id="slide_gallery_box">
<div class="slide_gallery">
<ul>
<li><img src="images/slide1.jpg" alt="" /></li>
<li><img src="images/slide2.jpg" alt="" /></li>
<li><img src="images/slide3.jpg" alt="" /></li>
<li><img src="images/slide4.jpg" alt="" /></li>
<li><img src="images/slide5.jpg" alt="" /></li>
</ul>
</div>
<div class="sub_menu_box">
<a href="#" class="m1 button"><img src="images/btn_prev.jpg" alt=""></a>
<a href="#" class="m2 button"><img src="images/btn_next.jpg" alt=""></a>
</div>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery scroll 스크롤 끝을 확인하는 방법 (0) | 2021.12.21 |
|---|---|
| jQuery sticky menu, scroll spy (0) | 2021.12.16 |
| jQuery 문자열을 변수로 변환하는 함수 eval (0) | 2021.12.15 |
| jQuery silde left (partenr banner) (0) | 2021.12.15 |
| jQuery 아코디언 갤러리 (컬랩스) (0) | 2021.12.15 |
