<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>슬라이드이미지 _버튼</title>
<script type="text/javascript" src="../../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
html,body{
height:100%;
}
body,p,ul,li{
margin:0px; padding:0px; list-style:none;
}
body{
background:url(../images/index_back.gif);
}
div#slide_wrap{
width:100%; height:80%; background:#CCC; margin-top:100px;
}
div#slide_center{
width:80%; margin:0px auto; position:relative; left:0px; top:0px;
}
ul#img_list{
position:absolute; left:0px; top:0px; width:100%;
}
ul#img_list li{
float:left;
}
ul#img_list li img{
display:block; width:100%;
}
span#prev_btn{
position:absolute; left:-5px; top:40%;
}
span#next_btn{
position:absolute; right:-5px; top:40%;
}
</style>
<script type="text/javascript">
var $slideWrap;
var $slideCenter;
var $imgList;
var $imgs; // 슬라이드 이미지들
var $btnImg // 버튼 이미지
var imgNum; // 슬라이드 이미지의 총 개수
var imgWidth; // 해당 슬라이드안의 1개 이미지의 너비
var imgHeight; // 해당 슬라이드안의 1개 이미지의 높이
var currentPosition; // 현재 움직여줄 ul의 좌표
var myInterval; // interval 담을 변수
// 반응형 jquery는 document ready가 아니라, window ready이다.
$(window).load(function(){
$slideWrap = $("#slide_wrap");
$slideCenter = $("#slide_center");
$imgList = $("#img_list");
$images = $("#img_list img");
// #slide_center 아래 span 아래 img들
$btnImg = $("#slide_center span img");
resizeReset();
// 최초 세팅: 맨마지막 사진을 첫번째 사진 앞에다가 붙여주기
$imgList.children().last().prependTo($imgList);
// 자동적으로 슬라이드가 next버튼 누른 것처럼 변하게 하는 interval 만들기
myInterval = setInterval(onNext, 2000);
// 사진에서 마우스가 떠나면, 슬라이드 넘기는 이벤트 멈추기
$slideWrap.bind("mouseleave", onPlay);
// 사진에서 마우스가 올라가면, 슬라이드 넘기는 이벤트 시작
$slideWrap.bind("mouseenter", onStop);
$("#prev_btn").bind("click", onPrev);
$("#next_btn").bind("click", onNext);
});
function onStop(){
clearInterval(myInterval);
//alert("myInterval1: " + myInterval);
}
function onPlay(){
myInterval = setInterval(onNext, 2000);
}
function onNext(){
currentPosition = $imgList.position().left;
// left를 이미지 사진만큼 이동해주면, 사진이 바뀌는 효과를 갖게됨
$("#img_list:not(:animated)").animate({"left":currentPosition-imgWidth}, 300, "easeOutCubic", function(){
// 맨첫번째 이미지가 이미지리스트의 맨 마지막에 이동하기
$imgList.children().first().appendTo($imgList);
// 사진이 이동한만큼 위치도 당겨주어야함
$imgList.css("left", -imgWidth);
});
}
function onPrev(){
currentPosition = $imgList.position().left;
// left를 이미지 사진만큼 이동해주면, 사진이 바뀌는 효과를 갖게됨
$("#img_list:not(:animated)").animate({"left":currentPosition-imgWidth}, 300, "easeOutCubic", function(){
// 맨 마지막 이미지가 이미지리스트의 맨 처음에 이동하기
$imgList.children().last().prependTo($imgList);
// 사진이 이동한만큼 위치도 당겨주어야함
$imgList.css("left", +imgWidth);
});
}
// window를 resize할때(화면의 크기가 재조정 될때)
$(window).resize(function(){
resizeReset();
});
// 반복되는 내용을 함수화 해서, 이렇게 정리해서 사용
function resizeReset(){
imgWidth = $slideCenter.innerWidth();
//alert(imgWidth);
// 슬라이드 돌릴 이미지들의 크기를 전부 imgWidth 크기만큼 바꿔야함
$images.css("width", imgWidth);
// 반응형이기때문에 이미지 높이도 맞추어줘야함
imgHeight=$images.height();
// 슬아이드 화면 전체의 높이 세팅
$slideCenter.css("height",imgHeight);
// 슬아이드를 감싸는 전체의 높이 세팅
$slideWrap.css("height", imgHeight);
// 슬라이드 화면을 이미지의 높이만큼 바꿔야함
$slideWrap.css("height", $images.innerHeight());
// 슬라이드 버튼도 이미지를 기준으로 너비의 20분의 1로 만듦
$btnImg.css("width", imgWidth/20);
// 이미지 개수
imgNum = $images.size();
//alert(imgNum);
// 이미지 리스트의 너비가 전체 이미지 너비 * 개수
$imgList.css("width", imgWidth * imgNum);
// 최초 세팅: 맨마지막 사진을 첫번째 사진 앞에다가 붙여주기
//$imgList.children().last().prependTo($imgList);
// 최초 세팅: 첫번째 사진이 보여야하므로 위치를 사진의 너비만큼 왼쪽으로 이동
$imgList.css("left", - imgWidth);
}
</script>
</head>
<body>
<div id="slide_wrap">
<div id="slide_center">
<ul id="img_list">
<li><img src="../images/img1.gif" alt="" /></li>
<li><img src="../images/img2.gif" alt="" /></li>
<li><img src="../images/img3.gif" alt="" /></li>
<li><img src="../images/img4.gif" alt="" /></li>
</ul>
<span id="prev_btn"><img src="../images/leftbtn.png" alt="" /></span>
<span id="next_btn"><img src="../images/rightbtn.png" alt="" /></span>
</div>
</div>
</body>
</html>
