이미지가 넘어가도록 동작하는 것, 플래시를 이용해서 많이 했지만, 무거워서 잘 사용하지 않고 자바스크립트를 활용해서 보통 쓴다.
자바스크립트를 사용해서 플래시나 실버라이트의 시각적 효과를 구현하려면 다음 세가지 사항을 CSS로 미리 지정해야 한다.
- 캔버스의 width 스타일 속성과 height 스타일 속성은 반드시 지정
- 캔버스의 position 스타일 속성은 Relative로 지정
- 캔버스의 overflow 스타일 속성은 hidden으로 지정
- 구성요소의 position 스타일 속성은 Absolute로 지정
이미지 슬라이더 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#canvas{
width: 600px;
height: 400px;
position:relative;
overflow: hidden;
}
.slider_panel{ width:3000px; position:relative;}
.slider_image{ float: left; width: 600px; height:400px; object-fit:cover;}
.slider_text_pane{ position:absolute; top:200px; left:50px; }
.slider_text{ position:absolute; top:250px; left:-300px; background-color: rgba(255,255,255,0.5); overflow:hidden; padding:10px; }
.control_panel{ position: absolute; top:360px; left:270px; height:20px; overflow: hidden; }
.control_btn{margin:3px; width:12px; height:12px; background-color:white; border-radius:50%; border: 2px white solid; cursor:pointer; float: left; }
.control_btn:hover { background-color:gray;}
.control_btn_active { background-color:black; }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$(".slider_text").each(function(index) {
$(this).attr('data-index',index);
});
$(".control_btn").each(function(index) {
$(this).attr('data-index',index);
});
function moveSlider(index) {
var willMoveleft = -(index*600);
$(".slider_panel").animate( {left:willMoveleft }, 'slow' );
$(".slider_text[data-index="+index+"]").show().animate({left:30},'slow');
$(".slider_text[data-index!="+index+"]").hide().animate({left:-300},'slow');
$(".control_btn[data-index="+index+"]").addClass("control_btn_active");
$(".control_btn[data-index!="+index+"]").removeClass("control_btn_active");
};
$(".control_btn").click(function() {
var index = $(this).attr("data-index");
moveSlider(index);
});
var randomNumber = Math.round(Math.random()*4);
moveSlider(randomNumber);
});
</script>
</head>
<body>
<h1>Trip Photo</h1>
<div id="canvas">
<div class ="slider_panel">
<img class="slider_image" src="img/trip1.jpg"/>
<img class="slider_image" src="img/trip2.jpg"/>
<img class="slider_image" src="img/trip3.jpg"/>
<img class="slider_image" src="img/trip4.jpg"/>
<img class="slider_image" src="img/trip5.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>
<div class="control_panel">
<div class="control_btn"></div>
<div class="control_btn"></div>
<div class="control_btn"></div>
<div class="control_btn"></div>
<div class="control_btn"></div>
</div>
</div>
</div>
<h1>Trip Photo</h1>
</body>
</html>
최종 결과
반응형
'Java Script > jQuery' 카테고리의 다른 글
| jQuery 예제, 버튼 이벤트로 정보 숨기고 보이기(토글) (0) | 2019.05.14 |
|---|---|
| jQuery 예제, 체크박스 모두 선택 (0) | 2019.05.14 |
| jQuery 애니메이션 큐 (이벤트 누적 제어) (0) | 2019.05.14 |
| jQuery 이벤트 메소드 (0) | 2019.05.14 |
| jQuery, 특정 태그 선택 후 값 처리 (0) | 2019.05.14 |
댓글