JS 프레임워크/jQuery
[jQuery] 이미지 슬라이더
by 두리두리안
2021. 4. 14.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
* { margin:0px; padding:0px; }
/* Animation Canvas */
.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; }
/* Slider Text Panel */
.slider_text_panel { position:absolute; top:200px; left:50px; }
.slider_text { position:absolute; width:250px; height:150px; color:White; }
/* Control Panel */
.control_panel {
position:absolute; top:380px;
left:270px; height:13px;
overflow:hidden;
}
.control_button {
width:12px; height:46px;
position:relative;
float:left; cursor:pointer;
background:url('point_button.png');
}
.control_button:hover { top:-16px; }
.control_button:active { top:-31px; }
</style>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function() {
// 슬라이더를 움직여주는 함수
function moveSlider(index) {
var willMoveLeft = -(index * 600);
$('.slider_panel').animate({ left: willMoveLeft }, 'slow');
// control_button에 active 클래스 부여/제거
$('.control_button[data-index=' + index + ']').addClass('active');
$('.control_button[data-index!=' + index + ']').removeClass('active');
// 글자 이동
$('.slider_text[data-index=' + index + ']').show().animate({
left: 0
}, 'slow');
$('.slider_text[data-index!=' + index + ']').hide('slow', function() {
$(this).css('left', -300);
});
};
// 초기 텍스트 위치 지정과 data-index 할당
$('.slider_text').css('left', -300).each(function(index) {
$(this).attr('data-index', index);
});
// 컨트롤 버튼의 클릭 핸들러 지정과 data-index 할당
$('.control_button').each(function(index) {
$(this).attr('data-index', index);
}).click(function() {
var index = $(this).attr('data-index');
moveSlider(index);
});
// 초기 슬라이더 위치 지정
var randomNumber = Math.round(Math.random() * 4);
moveSlider(randomNumber);
});
</script>
</head>
<body>
<h1>Test Header</h1>
<div class+"animation_canvas">
<div class="slider_panel">
<img class="slider_image" src="Desert.jpg" />
<img class="slider_image" src="Hydrangeas.jpg" />
<img class="slider_image" src="Jellyfish.jpg" />
<img class="slider_image" src="Koala.jpg" />
<img class="slider_image" src="Lighthouse.jpg" />
</div>
<div class="slider_text_panel">
<div class="slider_text">
<h1>애국가</h1>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세</p>
</div>
<div class="slider_text">
<h1>애국가</h1>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세</p>
</div>
<div class="slider_text">
<h1>애국가</h1>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세</p>
</div>
<div class="slider_text">
<h1>애국가</h1>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세</p>
</div>
<div class="slider_text">
<h1>애국가</h1>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세</p>
</div>
</div>
<div class="control_panel">
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
</div>
</div>
<h1>Test Header</h1>
</body>
</html>
