728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220426/slideimg.html -->
<html>
<head>
<meta charset="UTF-8">
<title>슬라이드 이미지 만들기</title>
<style type="text/css">
* { margin : 0px; padding : 0px; }
.animation_canvas {
overflow : hidden; /* 바깥영역은 안보여줌 */
position : relative; /* 기본위치에 태그 배치. left, top.. 설정안함*/
width : 600px;
height : 400px;
}
.slider_panel {
width : 3000px;
position : relative;
}
.slider_image { /* img 태그 */
float : left; /* 배치방식 : 왼쪽부터*/
width : 600px;
height : 400px;
}
.slider_text_panel {
position : absolute; /* 절대좌표 이용으로 배치 */
top : 100px;
left : 50px;
}
.slider_text { /* .slider_text 태그들이 같은 위치 배치*/
position : absolute;
width : 250px;
height : 150px;
}
.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('../img/point_button.png'); /* 배경이미지 설정 */
}
.control_button:hover {top:-16px;} /* 마우스 커서 입장시 이미지 변경 */
/* class속성의 값이 control_button 태그들 중 class속성값이 select 인 태그 */
.control_button.select {top:-31px;} /* 마우스 커서 입장시 이미지 변경 */
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".control_button").each(function(index) {
$(this).attr("idx", index);
}).click(function() { //클릭이벤트 등록
//$(this) : 클릭된 control_button태그
let index = $(this).attr("idx");
moveSlider(index);
})
$(".slider_text").css("left",-300).each(function(index) {
$(this).attr("idx", index); //idx속성을 등록. idx=0,...
});
moveSlider(0);
let idx = 0;
let inc = 1;
//setInterval(함수, 밀리초) : 밀리초에 한번씩 함수 실행
setInterval(function() {
if(idx >= 4) inc = -1;
if(idx <= 0) inc = 1;
idx += inc;
moveSlider(idx);
},2000)
})
function moveSlider(index) { //0 => 1
var moveLeft = -(index * 600); //0 => -600
//이미지를 표시
$(".slider_panel").animate({left:moveLeft},'slow'); //index번째의 이미지 화면출력
//하단 버튼 표시
//class 속성이 control_button 인 태그 중 idx속성값이 index인 태그
$(".control_button[idx =" + index + "]").addClass("select");
//class 속성이 control_button 인 태그 중 idx속성값이 index가 아닌 태그
$(".control_button[idx !=" + index + "]").removeClass("select");
//텍스트 표시
$(".slider_text[idx =" + index + "]").show().animate({
left : 0 //left = -300 에서 0으로 변경. 화면에 보여짐.
}, "slow") //천천히
$(".slider_text[idx !=" + index + "]").hide("slow", function() {
$(this).css("left", -300); //left = -300으로 변경. 화면에서 사라짐.
})
}
</script>
</head>
<body>
<h1>슬라이드 이미지 구현하기</h1>
<div class="animation_canvas">
<div class="slider_panel">
<img src="../img/Desert.jpg" class="slider_image" />
<img src="../img/Hydrangeas.jpg" class="slider_image" />
<img src="../img/Jellyfish.jpg" class="slider_image" />
<img src="../img/Koala.jpg" class="slider_image" />
<img src="../img/Lighthouse.jpg" class="slider_image" />
</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_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
</div>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 23. jquery xml 예제2 (우편번호 보기) (0) | 2022.04.27 |
|---|---|
| [Jquery] 23. jquery xml 예제1 (서울 구 보기) (0) | 2022.04.27 |
| [Jquery] 21. Jquery animate2 (id값주기) (0) | 2022.04.26 |
| [Jquery] 21. Jquery animate1 (animate) (0) | 2022.04.26 |
| [Jquery] 21. Jquery game (그림 맞추기 게임만들기) (0) | 2022.04.25 |