<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
*{margin:0; padding: 0;}
ul,li{list-style: none;}
img{display: block; border:0;}
#mask{
width:800px;
height:300px;
border:10px solid black;
margin:0 auto;
position: relative;
overflow: hidden;
}
#img_wrap{
width: 4000px;
height: 300px;
position: absolute;
top:0;
left: 0;
}
#img_wrap>img{
width:800px;
height:300px;
float: left;
}
#btn_wrap{
width:250px;
height: 50px;
background-color:lightgray;
position: absolute;
bottom:20px;
left: 50%;
margin-left: -125px;
}
#btn_wrap>li{
width:50px;
height: 50px;
background-color: black;
color:#fff;
text-align: center;
float: left;
border-radius: 50%;
font:800 20px/50px '';
}
#text_wrap{
width:200px;
height: 150px;
background-color: pink;
position: absolute;
top:10px;
left: 10px;
}
#text_wrap>li{
width:100%;
height: 100%;
background-color: lightcoral;
font:40px/150px '';
text-align: center;
position: absolute;
top:0;
left: -250px;
}
#text_wrap>li:nth-child(1){
left: 0;
}
#btn_wrap .active{
background-color: crimson;
color: gold;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
/**문제
1.각 버튼을 순서값 세워줌
2.각 버튼을 클릭했을 때 이미지가 가로 기준으로
버튼 순서에 맞게 이동
btn_wrap안에 li의 순서값에 반응해서
img_wrap이 왼쪽에서 600만큼 이동하게 작성
변수와 움직임을 연동시켜줌
+추가
1.텍스트,버튼 순서값 세우기
2.버튼을 클릭했을 때
-클릭한 버튼 순서값과 이미지 애니메이트
-클릭한 버튼 색상addClass 다른버튼 removeClass
-클릭한 버튼 순서값에 맞게 텍스트 들어오고
순석값이 아닌 객체는 밖으로 나가게
버튼을 클릭했을 때 버튼에 색깔이 들어오도록하기->addClass removeClass사용
이미지 위에 각각 테스트 하나씩 올려주기
->text_wrap 5개 모두 겹치게해서 부모 밖에 나두고 순서에 맞는 텍스트만 위에 올라오도록
mask:800*300
btn_wrap:250*50
btn:50*50
text_wrap 200*150
*/
$('#text_wrap>li').each(function(index){
$(this).attr('data-index',index);
});
$('#btn_wrap>li').each(function(index){
$(this).attr('data-index',index);
}).click(function(){
var i = $(this).attr('data-index');
//이미지 슬라이드
$('#img_wrap').animate({
left:-800*i
});
//버튼 addClass removeClass
$('#btn_wrap>li').removeClass('active');
$('#btn_wrap>li').eq(i).addClass('active');
/*->우선순위 : 순서를 바꿔준다*/
//텍스트 슬라이드
/*$('#text_wrap>li').animate({
left:-250
});
$('#text_wrap>li').eq(i).animate({
left:0
});*/
/*text_wrap속도를 빠르게 해주기 위해서는...*/
/*$('선택자[data-index!='+변수+']').명령어();
=>선택자의 data-index와 변수를 비교해서 틀렸을때
$('선택자[data-index='+변수+']').명령어();
=>선택자의 data-index와 변수를 비교해서 같을떄*/
$('#text_wrap>li[data-index!='+i+']').animate({
left:-250
});
$('#text_wrap>li[data-index='+i+']').animate({
left:0
});
});
});//end
</script>
</head>
<body>
<div id="mask">
<div id="img_wrap">
<img src="img/kiminonaha.jpg" alt=""/>
<img src="img/totoro.jpg" alt=""/>
<img src="img/sen.jfif" alt=""/>
<img src="img/pooh.png" alt=""/>
<img src="img/tangled.png" alt=""/>
</div>
<ul id="btn_wrap">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="text_wrap">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
<li>다섯번째</li>
</ul>
</div>
</body>
</html>
코딩 기록 블로그