jQuery - 이미지 슬라이드 소스
사전 준비사항
- 이미지 images1~5.png 파일 5개 버튼 좌우 이미지2개 필수
- 그리고 src 경로는 본인 프로젝트 경로와 다를 수있습니다.
HTML - 소스
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="../css/imgslide.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../css/common.css" rel="stylesheet" type="text/css" media="all"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script type="text/javascript" src="../js/controller.js"></script>
<script>
</script>
</head>
<body>
<div class="wrap"> <!-- 전체 wrap 감싸안으며 -->
<div class="slide">
<button type="button" class="prev">
<img src="../images/left.png" />
</button>
<ul>
<li><img src="../images/image1.png" alt="" /></li>
<li><img src="../images/image2.png" alt="" /></li>
<li><img src="../images/image3.png" alt="" /></li>
<li><img src="../images/image4.png" alt="" /></li>
<li><img src="../images/image5.png" alt="" /></li>
</ul>
<button type="button" class="next">
<img src="../images/right.png" />
</button>
</div>
</div><!-- wrap END -->
</body>
</html>
CSS - 소스
img{
display: block;
border: 0;
}
.slide{
width: 600px;
height: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slide ul{
width: 3000px;
list-style: none;
font-size: 0;
}
.slide ul li{
display: inline-block;
}
.slide button.prev{
position: absolute;
left: 0;
top: 120px;
}
.slide button.next{
position: absolute;
right: 0;
top: 120px;
}
JS - 소스
(function(){
var current = 0;
var max = 0;
var container;
var interval;
var xml;
var animateTarget = null;
function init(){
container = jQuery(".slide ul");
max = container.children().length;
//console.log();
events();
interval = setInterval(next, 3000);
}
// 무한 롤링 셋팅
function setting(){
container.css("margin-left","-600px");
container.prepend(container.children()[max-1]);
}
function events(){
jQuery("button.prev").on("click", prev);
jQuery("button.next").on("click", next);
jQuery(window).on("keydown", keydown);
}
function prev( e ){
current--;
if( current < 0 ) current = max-1;
animate("prev"); // pram
}
function next( e ){
current++;
if( current > max-1 ) current = 0;
animate("next"); // pram
}
function animate( $direction ){
if( animateTarget !=null ){
TweenMax.killTweensOf( animateTarget );
animateTarget.css("margin-left","0");
}
if( $direction == "next"){
jQuery(container.children()[1]).css("margin-left","600px");
container.append( container.children()[0] );
} else if( $direction == "prev"){
container.prepend( container.children()[max-1] );
jQuery(container.children()[0]).css("margin-left","-600px");
}
animateTarget = jQuery(container.children()[0]);
TweenMax.to( animateTarget, 0.8, { marginLeft:0, ease:Expo.easeOut });
clearInterval(interval); // 누적된어 있는것을 클리어 함
interval = setInterval(next, 3000); // Interval 누적됨
}
function keydown( e ){
//console.log(e); 키보드 이벤트 로그
if( e.which == 39 /*right*/ ){
next();
}else if( e.which == 37 /*left*/ ){
prev();
}
}
jQuery( document ).ready( init );
})();
소스 출처 : https://www.youtube.com/watch?v=ifchyv2u-VE&list=PLkvX9D0C9X8tPzDuTEVd4O2aJs-nYNLir&index=4
유지남님 감사합니다.
