이미지 슬라이더
- 5버튼 (버튼 클릭할 때마다 해당 인덱스 이미지로 이동)
- raw
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
<style>
.ani_canvas{
position: relative;
width: 600px;
overflow: hidden;
}
.slider_panel{
position: relative;
width: 3000px;
}
.slider_image{
width: 600px;
height: 400px;
float: left;
}
.slider_text_panel{
position: absolute;
top: 200px;
left: 50px;
}
.slider_text{
position: absolute;
width: 300px;
height: 200px;
color: #ff0;
}
.control_panel{
position: absolute;
top: 380px;
left: 270px;
height: 13px;
overflow: hidden; /* 버튼 한 행만 보이도록*/
}
.control_button{
position: relative;
cursor: pointer;
background: url(../images/point_button.png);
width: 12px;
height: 46px;
float: left;
}
.control_button:hover{ /*호버시 한칸 올림*/
top:-16px;
}
.control_button.active{ /*두 클래스 모두 가지면 두칸 올림*/
top:-31px
}
</style>
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script>
$(function(){
var i;
//0번째 이미지 설정 먼저
$('.slider_text').hide(); //겹쳐져 있는 텍스트 다 숨기기
$('.control_button').eq(0).addClass('active'); //초기화면에 파란점 0번째 사진에 표시
$('.slider_text').eq(0).fadeIn('slow'); //초기화면에 0번째 사진에 설명 올라오도록
//전체 이미지 설정
$('.control_button').click(function(){
i=$(this).index();
$('.slider_panel').animate({
left:(-600)*i //인덱스별 좌측이동
},'fast');
$('.control_button').removeClass('active'); //기존 addclass 초기화
$(this).addClass('active'); //지금 선택한 버튼에 addclass
$('.slider_text').hide(); //기존 다른 사진 설명 hide
$('.slider_text').eq(i).fadeIn('slow'); //지금 선택한 사진 show
});
});
</script>
</head>
<body>
<h1>이미지 슬라이더</h1>
<!-- 이미지 슬라이더 영역 -->
<div class="ani_canvas">
<!-- 슬라이더 패널 : 움직이는 이미지가 전환되는 효과 -->
<div class="slider_panel"> <!--다섯 이미지 일렬로 담음-->
<img class="slider_image" src="../images/Koala.jpg" alt="">
<img class="slider_image" src="../images/Desert.jpg" alt="">
<img class="slider_image" src="../images/Lighthouse.jpg" alt="">
<img class="slider_image" src="../images/Jellyfish.jpg" alt="">
<img class="slider_image" src="../images/Penguins.jpg" alt="">
</div>
<!-- 각 이미지에 대한 설명을 담는 패널 -->
<div class="slider_text_panel">
<div class="slider_text">
<h2>Koala</h2>
<p>유대목 코알라과에 속하는 포유류. 현지에서는 네이티브베어(native bear)라고 한다</p>
</div>
<div class="slider_text">
<h2>Desert</h2>
<p>강수량이 적어서 식생이 보이지 않거나 적고, 인간의 활동도 제약되는 지역</p>
</div>
<div class="slider_text">
<h2>Lighthouse</h2>
<p>항로 표지의 하나. 바닷가나 섬 같은 곳에 탑 모양으로 높이 세워 밤에 다니는 배에
목표, 뱃길, 위험한 곳 따위를 알려 주려고 불을 켜 비추는 시설</p> </div>
<div class="slider_text">
<h2>Jellyfish</h2>
<p>해파리는 대체로 투명하며, 갓 둘레에 많은 촉수를 가지고 있다.
촉수에는 자세포(쏘기세포)가 있어 동물분류학상 자포동물(刺胞動物)문에 속한다.</p> </div>
<div class="slider_text">
<h2>Penguins</h2>
<p>조류 펭귄목 펭귄과 동물을 통틀어 이르는 말. 펭귄과의 바닷새로서
남반구에 6속 18종이 있다. 곧추 서서 걸으며 헤엄치기에 알맞게 날개가 지느러미 모양이고 앞다리의 날개깃은 변형되어 있다. </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>
</body>
|
cs |
- 중복 코드 함수로 축약
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<script>
$(function(){
//초기 화면 - 0번째 이미지 설정
var i=0;
imgSlider(i);
//버튼 클릭
$('.control_button').click(function(){
i=$(this).index(); //본인 인덱스 얻어와야 함
imgSlider(i);
});
//이미지 슬라이드 구현 함수
function imgSlider(i){
$('.slider_panel').animate({
left:(-600)*i
},'fast');
$('.control_button').removeClass('active');
$('.control_button').eq(i).addClass('active');
$('.slider_text').hide();
$('.slider_text').eq(i).fadeIn('slow');
}
});
</script>
|
cs |
- 화살표 기능 추가
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<script>
$(function(){
//초기 화면 - 0번째 이미지 설정
var i=0;
imgSlider(i);
//5 버튼 클릭
$('.control_button').click(function(){
i=$(this).index(); //본인 인덱스 얻어와야 함
imgSlider(i);
});
//내 답변
// $('.lr_control_panel').children().click(function(){
// index=$(this).index();
// if(index==0){ //left
// i--;
// }else{ //right
// i++;
// }
// if(i<0){i=0}
// if(i>4){i=4}
// imgSlider(i);
// });
//left
$('.l_control').click(function(){
i--;
if(i<0){i=0;}
imgSlider(i);
});
//right
$('.r_control').click(function(){
i++;
if(i>4){i=4;}
imgSlider(i);
});
//이미지 슬라이드 구현 함수
function imgSlider(i){
$('.slider_panel').animate({
left:(-600)*i //인덱스별 좌측이동
},'fast');
$('.control_button').removeClass('active'); //기존 addclass 초기화
$('.control_button').eq(i).addClass('active'); //지금 선택한 버튼에 addclass
$('.slider_text').hide(); //기존 다른 사진 설명 hide
$('.slider_text').eq(i).fadeIn('slow'); //지금 선택한 사진 show
}
});
</script>
|
cs |
- 5-0번째 이미지 이어서 보여주기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<script>
$(function(){
//초기 화면 - 0번째 이미지 설정
var i=0;
imgSlider(i);
//5 버튼 클릭
$('.control_button').click(function(){
i=$(this).index(); //본인 인덱스 얻어와야 함
imgSlider(i);
});
//left
$('.l_control').click(function(){
i--;
if(i<0){i=0;}
imgSlider(i);
});
//right
$('.r_control').click(function(){
i++;
if(i>4){i=4;}
imgSlider(i);
});
//이미지 슬라이드 구현 함수
function imgSlider(i){
//복수조건이므로 단일조건보다 먼저 작성
if (i<4 && i>0){
$('.r_control').fadeIn('fast');
$('.l_control').fadeIn('fast');
}
if (i==4){
$('.r_control').fadeOut('fast');
$('.l_control').fadeIn('fast'); //좌우화살표 모두 없어지는 오류 방지
}
if (i==0){
$('.l_control').fadeOut('fast');
$('.r_control').fadeIn('fast'); //오류 방지
}
$('.slider_panel').animate({
left:(-600)*i //인덱스별 좌측이동
},'fast');
$('.control_button').removeClass('active'); //기존 addclass 초기화
$('.control_button').eq(i).addClass('active'); //지금 선택한 버튼에 addclass
$('.slider_text').hide(); //기존 다른 사진 설명 hide
$('.slider_text').eq(i).fadeIn('slow'); //지금 선택한 사진 show
}
});
</script>
|
cs |
- 자동 슬라이드 추가 (오른쪽, 왼쪽 이동 반복)
- 실패 (오른쪽으로 슬라이드하다가 왼쪽으로 방향 변경 못함)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<script>
$(function(){
//초기 화면 - 0번째 이미지 설정
var i=0;
imgSlider(i);
autoSlider();
//5 버튼 클릭
$('.control_button').click(function(){
i=$(this).index(); //본인 인덱스 얻어와야 함
imgSlider(i);
});
//left
$('.l_control').click(function(){
i--;
if(i<0){i=0;}
imgSlider(i);
});
//right
$('.r_control').click(function(){
i++;
if(i>4){i=4;}
imgSlider(i);
});
//자동 이미지 슬라이드
function autoSlider(){
setInterval(function(){
if(i<4){ //0-1-2-3 / 3 / 3 / 반복 => if 조건 겹쳐서 선행조건에 계속 걸림
$('.r_control').trigger('click');
}
if(i>0){ //4 / 4 / 반복
$('.l_control').trigger('click');
}
},1000);
}
//이미지 슬라이드 구현 함수
function imgSlider(i){
//두가지 조건 충족해야 하면 1순위로 작성
if (i<4 && i>0){
$('.r_control').fadeIn('fast');
$('.l_control').fadeIn('fast');
}
if (i==4){
$('.r_control').fadeOut('fast');
$('.l_control').fadeIn('fast');
}
if (i==0){
$('.l_control').fadeOut('fast');
$('.r_control').fadeIn('fast');
}
$('.slider_panel').animate({
left:(-600)*i //인덱스별 좌측이동
},'fast');
$('.control_button').removeClass('active'); //기존 addclass 초기화
$('.control_button').eq(i).addClass('active'); //지금 선택한 버튼에 addclass
$('.slider_text').hide(); //기존 다른 사진 설명 hide
$('.slider_text').eq(i).fadeIn('slow'); //지금 선택한 사진 show
}
});
</script>
|
cs |
- 수정
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<script>
$(function(){
//초기 화면 - 0번째 이미지 설정
var i=0;
var on=false;
imgSlider(i);
autoSlider();
//5 버튼 클릭
$('.control_button').click(function(){
i=$(this).index(); //본인 인덱스 얻어와야 함
imgSlider(i);
});
//left
$('.l_control').click(function(){
i--;
if(i<0){i=0;}
imgSlider(i);
});
//right
$('.r_control').click(function(){
i++;
if(i>4){i=4;}
imgSlider(i);
});
//자동 이미지 슬라이드
function autoSlider(){
setInterval(function(){
if(i<4 &&on==false){ //0-1-2-3 / ...(반복)
$('.r_control').trigger('click');
} else{
on=true;
}
if(i>0 &&on==true){ //4-3-2-1 / ...
$('.l_control').trigger('click');
}else{
on=false;
}
},1000);
}
//이미지 슬라이드 구현 함수
function imgSlider(i){
//두가지 조건 충족해야 하면 1순위로 작성
if (i<4 && i>0){
$('.r_control').fadeIn('fast');
$('.l_control').fadeIn('fast');
}
if (i==4){
$('.r_control').fadeOut('fast');
$('.l_control').fadeIn('fast');
}
if (i==0){
$('.l_control').fadeOut('fast');
$('.r_control').fadeIn('fast');
}
$('.slider_panel').animate({
left:(-600)*i //인덱스별 좌측이동
},'fast');
$('.control_button').removeClass('active'); //기존 addclass 초기화
$('.control_button').eq(i).addClass('active'); //지금 선택한 버튼에 addclass
$('.slider_text').hide(); //기존 다른 사진 설명 hide
$('.slider_text').eq(i).fadeIn('slow'); //지금 선택한 사진 show
}
});
</script>
|
cs |
- 호버 시 자동 슬라이드 중지 기능 추가
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<script>
$(function(){
//초기 화면 - 0번째 이미지 설정
var i=0;
var on=false;
var auto;
imgSlider(i);
autoSlider();
//5 버튼 클릭
$('.control_button').click(function(){
i=$(this).index(); //본인 인덱스 얻어와야 함
imgSlider(i);
});
//left
$('.l_control').click(function(){
i--;
if(i<0){i=0;}
imgSlider(i);
});
//right
$('.r_control').click(function(){
i++;
if(i>4){i=4;}
imgSlider(i);
});
//애니메이션 캔버스 영역 이벤트 (자동 슬라이드 중지)
$('.ani_canvas').hover(function(){
clearInterval(auto);
},function(){
autoSlider();
});
//자동 이미지 슬라이드
function autoSlider(){
auto=setInterval(function(){
if(i<4 &&on==false){
$('.r_control').trigger('click');
} else{
on=true;
}
if(i>0 &&on==true){
$('.l_control').trigger('click');
}else{
on=false;
}
},1000);
}
//이미지 슬라이드 구현 함수
function imgSlider(i){
//두가지 조건 충족해야 하면 1순위로 작성
if (i<4 && i>0){
$('.r_control').fadeIn('fast');
$('.l_control').fadeIn('fast');
}
if (i==4){
$('.r_control').fadeOut('fast');
$('.l_control').fadeIn('fast');
}
if (i==0){
$('.l_control').fadeOut('fast');
$('.r_control').fadeIn('fast');
}
$('.slider_panel').animate({
left:(-600)*i //인덱스별 좌측이동
},'fast');
$('.control_button').removeClass('active'); //기존 addclass 초기화
$('.control_button').eq(i).addClass('active'); //지금 선택한 버튼에 addclass
$('.slider_text').hide(); //기존 다른 사진 설명 hide
$('.slider_text').eq(i).fadeIn('slow'); //지금 선택한 사진 show
}
});
</script>
|
cs |
- 이미지 슬라이드 루프(연속)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<style>
.ani_canvas{
position: relative;
width: 600px;
overflow: hidden;
}
.slider_panel{
position: relative;
width: 4200px;
}
.slider_image{
width: 600px;
height: 400px;
float: left;
}
.slider_text_panel{
position: absolute;
top: 200px;
left: 50px;
}
.slider_text{
position: absolute;
width: 300px;
height: 200px;
color: #ff0;
}
.control_panel{
position: absolute;
top: 380px;
left: 270px;
height: 13px;
overflow: hidden;
}
.control_button{
position: relative;
cursor: pointer;
background: url(../images/point_button.png);
width: 12px;
height: 46px;
float: left;
}
.control_button:hover{
top:-16px;
}
.control_button.active{ /*두 클래스 모두 가지면*/
top:-31px
}
.l_control{
position: absolute;
top: 150px;
left: 0;
cursor: pointer;
}
.r_control{
position: absolute;
top: 150px;
right: 0;
cursor: pointer;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script>
$(function(){
$('.slider_panel').append($('.slider_panel>img').first().clone()); //맨앞 이미지 맨뒤에 추가
$('.slider_panel').prepend($('.slider_panel>img').eq(-2).clone());
//맨뒤(앞선 코드의 영향으로 뒤에서 두번째 이미지) 이미지 맨앞에 추가 // 0 1 2 3 4 => 0 1 2 3 4 5 6 var i=1;
imgSlider(i);
//5버튼
$('.control_button').click(function(){
i=$(this).index();
imgSlider(i+1); //0번째 버튼 클릭 시 1번째 이미지 표시
});
//화살표 $('.r_control').click(function(){
if(i<5){
i++;
imgSlider(i);
}else{ //5번째 사진(1번째와 동일) 되자마자 1번째로 이동
$('.slider_panel').css('left','0');
i=1;
imgSlider(i);
}
});
$('.l_control').click(function(){
if(i>1){
i--;
imgSlider(i);
}else{
$('.slider_panel').css('left','-3600');
i=5;
imgSlider(i);
}
});
function imgSlider(i){
$('.slider_panel').animate({
left:(-600)*i //인덱스별 좌측이동
},'fast');
$('.control_button').removeClass('active'); //기존 addclass 초기화
$('.control_button').eq(i-1).addClass('active'); //지금 선택한 버튼에 addclass
}
});
</script>
</head>
<body>
<h1>이미지 슬라이더</h1>
<!-- 이미지 슬라이더 영역 -->
<div class="ani_canvas">
<!-- 슬라이더 패널 : 움직이는 이미지가 전환되는 효과 -->
<div class="slider_panel"> <!--다섯 이미지 일렬로 담음-->
<img class="slider_image" src="../images/Koala.jpg" alt="">
<img class="slider_image" src="../images/Desert.jpg" alt="">
<img class="slider_image" src="../images/Lighthouse.jpg" alt="">
<img class="slider_image" src="../images/Jellyfish.jpg" alt="">
<img class="slider_image" src="../images/Penguins.jpg" alt="">
</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 class="lr_control_panel">
<img class="l_control" src="../images/leftArrow.png" alt="">
<img class="r_control" src="../images/rightArrow.png" alt="">
</div>
</div>
</body>
|
cs |
'Programming > 국비학원' 카테고리의 다른 글
| 220725 - 제이쿼리 - 예제, 플러그인 (ui, colorbox) (0) | 2022.07.26 |
|---|---|
| 220722 - 제이쿼리 - ui 플러그인 (0) | 2022.07.23 |
| 220720 - 제이쿼리 - 실습 예제, 플러그인 예제 (0) | 2022.07.21 |
| 220719 - 제이쿼리 - 실습 예제 (0) | 2022.07.21 |
| 220718 - 제이쿼리 - 애니메이션 큐(queue), jquery-ui 플러그인 (0) | 2022.07.19 |
