prev, next 기능 + dots 기능 사용가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.animation_canvas {
overflow:hidden;
position:relative;
width:600px; height:400px;
}
/* Slider Panel */
.slider_panel { width:3000px; position:relative; }
.slider_image { float:left; width:600px; height:400px; }
/* Control Panel */
.control_panel {
position:absolute;
bottom:10px;;
left:270px;
overflow:hidden;
color:white;
}
.prev_next{
position: absolute;
text-align: center;
overflow: hidden;
word-spacing: 500px;
bottom: 185px;
}
#prev,#next{
cursor: pointer;
}
.dot{
font-size:30px;
cursor:pointer;
}
</style>
<script>
var zero = 0; //초기값 (index값 느낌?)
var totalSlider = 5; // 총 사진 갯수
$(document).ready(function () {
// 슬라이더를 움직여주는 함수
function moveSlider(index){
var willMoveLeft = -(index * 600);
$('.slider_panel').animate({ left: willMoveLeft }, 'slow');
};
function nextSlider(){
var willMoveLeft = -(zero * 600);
zero++; //클릭할때 마다 초기값 증가 (index 느낌)
if(zero == totalSlider){zero = 0;} // 사진이 마지막장까지 갔을때 클릭하면 0으로 돌아옴
$('.slider_panel').css('left', willMoveLeft);
}
function prevSlider(){
var willMoveLeft = -(zero*600);
zero--;
if(zero == -1){zero = totalSlider-1;}
$('.slider_panel').css('left',willMoveLeft);
}
$(".dot").click(function(){
moveSlider($(this).index());
});
$("#next").click(function(){
nextSlider();
});
$("#prev").click(function(){
prevSlider();
});
});
</script>
</head>
<body>
<div class="animation_canvas">
<div class="slider_panel">
<img src="img/pic1.jpg" class="slider_image"/>
<img src="img/pic2.jpg" class="slider_image"/>
<img src="img/pic3.jpg" class="slider_image"/>
<img src="img/pic4.jpg" class="slider_image"/>
<img src="img/pic5.jpg" class="slider_image"/>
</div>
<div class="prev_next" style="font-size: 90px; color: white;" >
<span id="prev">‹</span>
<span id="next">›</span>
</div>
<div class="control_panel" style="text-align:center">
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
</div>
</div>
</body>
</html>
이미지 5장을 넣으시고 실행하면 됩니다 !
dots기능 + 애니메이션 기능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.animation_canvas {
overflow:hidden;
position:relative;
width:600px;
height:400px;
}
/* Slider Panel */
.slider_panel { width:600px; position:relative; }
.slider_image { position:absolute;
left:0;
top:0;
width:600px; height:400px; }
.slider_image:nth-child(1){z-index: 5;}
.slider_image:nth-child(2){z-index: 4;}
.slider_image:nth-child(3){z-index: 3;}
.slider_image:nth-child(4){z-index: 2;}
.slider_image:nth-child(5){z-index: 1;}
/* Control Panel */
.control_panel {
position:absolute;
bottom:10px;;
left:270px;
overflow:hidden;
color:white;
z-index: 9999 !important;
}
.dot{
font-size:30px;
cursor:pointer;
}
</style>
<script>
$(document).ready(function () {
// 슬라이더를 움직여주는 함수
var prevIndex=0;
function moveSlider(index){
if(index==prevIndex){
return;
}
$('.slider_panel img').not(index).css("z-index",-1000);
$('.slider_panel img').eq(prevIndex).css("z-index",-500);
$('.slider_panel img').eq(index).css("z-index",1000);
if(index >prevIndex){
$('.slider_panel img').eq(index).css("left","600px");
$('.slider_panel img').eq(index).animate({left:0},500,"linear",null);
}
else{
$('.slider_panel img').eq(index).css("left","-600px");
$('.slider_panel img').eq(index).animate({left:0},500,"linear",null);
}
prevIndex=index;
};
$(".dot").click(function(){
moveSlider($(this).index());
});
});
</script>
</head>
<body>
<div class="animation_canvas">
<div class="slider_panel">
<img src="img/pic1.jpg" class="slider_image"/>
<img src="img/pic2.jpg" class="slider_image"/>
<img src="img/pic3.jpg" class="slider_image"/>
<img src="img/pic4.jpg" class="slider_image"/>
<img src="img/pic5.jpg" class="slider_image"/>
</div>
<div class="control_panel" style="text-align:center">
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
<span class="dot">*</span>
</div>
</div>
</body>
</html>
화면이 좌우로 부드럽게 넘어갑니다.
