|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
*{ margin: 0px; padding: 0px; }
/* Animation Canvas */
.animation-canvas {
position: relative;
overflow: hidden;
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: 200; left: 50px; }
.slider-text { position: absolute; width: 250px; height: 150px; }
/* Control Panel */
.control-panel {
position: absolute; top: 380px;
left: 270; 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; }
/* 폰트 변경 */
div>h1 {
color: red;
text-shadow: 2px 2px 2px black;
}
p {
color: red;
text-shadow: 2px 2px 2px black;
}
</style>
<script src="jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
// 슬라이더를 움직여주는 함수
function moveSlider(index){
// 슬라이더를 이동한다.
let 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(){
let index = $(this).attr('data-index');
moveSlider(index);
});
// 초기 슬라이더 위치 지정
let radomNumber = Math.round(Math.random()*4);
moveSlider(radomNumber);
});
</script>
</head>
<body>
<h1>World War 2 : Pacific War 1941 – 1945</h1>
<div class="animation-canvas">
<div class="slider-panel">
<img class="slider-image" src=".\Image\The Attack on Pearl Harbor.jpg">
<img class="slider-image" src=".\Image\The Battle of Midway.jpg">
<img class="slider-image" src=".\Image\Battle of Guadalcanal.jpg">
<img class="slider-image" src=".\Image\Battle of the Philippine Sea.jpg">
<img class="slider-image" src=".\Image\The Battle of Leyte Gulf.jpg">
</div>
<div class="slider-text-panel">
<div class="slider-text">
<h1>The Attack on Pearl Harbor</h1>
<p>December 7, 1941</p>
</div>
<div class="slider-text">
<h1>The Battle of Midway</h1>
<p>4–7 June 1942</p>
</div>
<div class="slider-text">
<h1>Battle of Guadalcanal</h1>
<p>7 August 1942 – 9 February 1943</p>
</div>
<div class="slider-text">
<h1>Battle of the Philippine Sea</h1>
<p>June 19–20, 1944</p>
</div>
<div class="slider-text">
<h1>The Battle of Leyte Gulf</h1>
<p>17 October – 26 December 1944</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>United States of America VS Empire of Japan</h1>
</body>
</html>
|
