* { margin:0px; padding:0px; }
/* Animation Canvas */
.animation_canvas {
width : 600px;height : 400px;
overflow: hidden;/*600 x 400 밖으로 나오는 애들은 가린다.*/
position : relative;
}
/* Slider Panel */
.slider_panel {
width: 3000px;
position: relative;
background-color: pink;
}
.slider_image {
float : left;
width : 600px; height : 400px;
}
/* Slider Text Panel */
.slider_text_panel {
position: absolute;
top: 200px;
left: 50px;
}
.slider_text {
position:absolute;
width: 250px; height: 150px; color:white;
}
/* Control Panel */
.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('point_button.png');
}
.control_button:hover { top:-16px; } /*마우스 가져다 대면 16px 올려서 활성 된 것 처럼 보임*/
.control_button.active { top:-31px; }/*마우스 클릭시 활성화 되어 파란 점이 보임*/
JavaScript
$(document).ready(function(){
//슬라이더 움직여줌
function moveSlide(index){
//슬라이더 이동
var willMoveLeft = -(index*600);
//도착지점은 왼쪽(0,0)이므로 이동할 거리를 -방향으로 지정
$('.slider_panel').animate({left:willMoveLeft},'slow');
//control_button에 active클래스를 부여/제거합니다.
$('.control_button[data-index=' + index + ']').addClass('active');
$('.control_button[data-index!=' + index + ']').removeClass('active');
//글자를 이동합니다
//show()-문서객체를 크게 하며 보여준다.
//hide()-문서객체를 작게 하여 사라진다.
//effectMethod(event,callback)형식-해당효과가 완료된 후, 호출될 함수
$('.slider_text[data-index=' + index + ']').show().animate({
left: 0
},'slow');//모든 내용이 겹쳐서(0,0)에 있으므로 그대로 보여주기만 하면 된다.
$('.slider_text[data-index!=' + index + ']').hide('slow',function(){
$(this).css('left',-300);
//hide 함수가 수행한 후 수행될 기능 서술
})
}
//초기 텍스트 위치 지정 및 data-index 할당
$('.slider_text').css('left',-300).each(function(index){//css조작
$(this).attr('data-index',index);//텍스트 각각 0~4까지 속성정보(attr메소드로) 추가됨.
})
//컨트롤 버튼의 클릭 핸들러 지정 및 data-index 할당
$('.control_button').each(function(index){//5개의 버튼에 모두 적용하기 위해 each를 사용함.
$(this).attr('data-index',index)//버튼 각각 0~4까지 속성정보(attr메소드로) 추가됨.
}).click(function(){//버튼 클릭시에 이벤트 발생
var index = $(this).attr('data-index');//index를 불러와서
moveSlide(index);//moveSlide 실행
});
//초기 슬라이더 위치 지정
var randomNumber = Math.round(Math.random()*4);//0~4
moveSlide(randomNumber)
})
