2016. 11. 23. 18:24ㆍ개발/웹 관련
가로 100% 세로 고정 높이로 돌아가는 슬라이드(애니메이션) 소스입니다.
jquery 플러그인 중에 가로 100% 슬라이드가 있기는 한데 해상도에 따라서 세로 높이가 늘어나는 소스 뿐이라서
좀 허접하더라도 직접 짜보자 해서 만들었던 코드입니다.
웹디가 어찌나 가로 100% 배경을 좋아라 했는지ㅠ
조금 에러가 있지만 수정하기도 귀찮고 그냥 이대로 종종 사용 중..;;
19인치 모니터일 경우 가로 100%, 세로 고정 높이
19인치보다 큰 모니터처럼 가로 사이즈 늘렸을 때
가로는 배경 이미지 크기만큼 보여지고 세로 높이는 고정이 됩니다.
사진은 경남 산청에 있는 지리산 당나귀 펜션 메인 사진입니다.
당나귀펜션은 좌우 화살표가 아닌 썸네일 형식으로 되어 있습니다.
아래부터 해당 코드입니다. 썸네일형식은 당나귀펜션 참고해보세요~
<!doctype html>
<html>
<head>
<style>
body{margin:0; padding:0;}
#main_slide_wrap {position:relative; width:100%; height:450px; background-color:#fff;}
#mainImg_wrap{position:relative; margin:0 auto; width:100%; height:450px;}
.mainImg{width:100%; height:100%; position:absolute; left:0; top:0; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);}
.mainImg0{opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);}
.mainImg0 {background:url('./design/img/main_img_01.jpg') center center no-repeat; }
.mainImg1{background:url('./design/img/main_img_02.jpg') center center no-repeat; }
.mainImg2{background:url('./design/img/main_img_03.jpg') center center no-repeat; }
.main_slide_content{width:1200px; margin:0 auto;}
.main_slide_link{height:450px;}
.main_slide_content{position:relative; margin:0 auto;}
.main_slide_link{position:absolute; left:0; top:0; width:100%; z-index:100;}
#btn_prev, #btn_next {display:inline-block; position:absolute; top:43%; width:33px; height:61px; cursor:pointer;}
#btn_prev {left:10px; color:#fff; background:url('/theme/v1/img/slide_btn_left.gif') no-repeat;}
#btn_next {right:10px; color:#fff; background:url('/theme/v1/img/slide_btn_right.gif') no-repeat;}
</style>
<script src="./js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="main_slide_wrap">
<div id="mainImg_wrap">
<div class="mainImg0 mainImg">
<div class="main_slide_content">
<a href="#" class="main_slide_link"></a>
</div>
</div>
<div class="mainImg1 mainImg"></div>
<div class="mainImg2 mainImg"></div>
</div>
<span id="btn_prev" class="slide_btn">Left</span>
<span id="btn_next" class="slide_btn">Right</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
var m_delay = 3000;
var duration = 700;
var m_timer = setInterval(change_bg, m_delay);
var s_div = $(".mainImg");
var s_count = s_div.size(); // 1~
var start_bg = 0;
if(s_count == 1) {
$(".slide_btn").hide();
}
function change_bg(){ //배경 애니메이션
s_div.each(function(e) {
if(start_bg == e) {
$(this).animate({'opacity':'1', 'filter':'alpha(opacity=100)', '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(opacity=100)'}, duration);
} else {
$(this).animate({'opacity':'0', 'filter':'alpha(opacity=0)', '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)'}, duration);
}
});
start_bg += 1;
if(start_bg > s_count - 1) { start_bg = 0; } //이미지 갯수 수정
}
$("#btn_next").click(function(){
change_bg();
});
$("#btn_prev").click(function(){
start_bg--;
if(start_bg < 0 ) { start_bg = s_count -1; } //이미지 갯수 수정
s_div.each(function(e) {
if(start_bg == e) {
$(this).animate({'opacity':'1', 'filter':'alpha(opacity=100)', '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(opacity=100)'}, duration);
} else {
$(this).animate({'opacity':'0', 'filter':'alpha(opacity=0)', '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)'}, duration);
}
});
});
});
</script>
</body>
</html>
변수명 등은..;;
필요하신 분 참고하시기 바랍니다.
'개발 > 웹 관련' 카테고리의 다른 글
| VSCODE 내장 터미널로 특정 단어를 포함한 파일 찾기 (6) | 2024.02.25 |
|---|---|
| 인공지능 챗봇(카카오톡 AskUp)을 이용한 대관 신청 프로그램 개발이야기 (2) | 2024.02.22 |
| 그누보드6 with 파이썬(python) 설치 후기 (0) | 2024.01.20 |
| 블로그 스킨 변경 & 간단수정 (3) | 2018.12.03 |
| MySQL의 기초 - 데이터 타입 (0) | 2010.03.10 |