jQuery 롤링배너에서 height 자동 조절..
본문
jQuery를 이용해서 롤링배너를 공부하고 있습니다.
검색에서 발견한 소스를 응용해서 잘 작동하는데, 한가지 창사이즈를 변경할 때 배너 div 사이즈가 문제 입니다.
브라우저창을 넓게 해서 보다가 창 가로 사이즈를 줄이면 거기에 맞춰 배너 그림도 축소되게 하였습니다.
(jQuey로 그림의 가로사이즈 만 창넓이로 변경하면 세로는 자동으로 비율에 맞춰 줄어 듭니다)
문제는 처음에 배너그림들을 감싼 div 의 height=500 으로 해 두었는데
그림이 축소되면 div 도 함께 줄어야 하는데 500px 그대로여서 그림 아래에 빈 공간이 생기게 됩니다.
그렇다고 height 를 아예 없애면 그림들이 아예 보이지 않습니다.
<style></style>안의 .banner{height:500px} 값을 없애고 그림을 보이게 할 방법이 있을까요?
height를 없애고 position 을 바꾸면 사이즈는 그림에 맞춰 지는데, 부르러운 롤링이 안되고 휙휙 바뀌더군요.
실행주소는 : http://yogibbs.kr/banner/banner.php
소스는 다음과 같습니다.
(위 페이지에 접속해서 [소스보기]로 보셔도 됩니다.)
이틀은 끙끙대다 포기하기 직전이네요. 아무쪼록 간단한 방법이 있었으면 좋겠습니다.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>롤링배너 jQuery</title>
<style>
.banner {position:relative; height:500px; margin:0 auto; padding:0; overflow:hidden;}
.banner ul {position:absolute; margin:0px; padding:0; list-style:none; }
.banner ul li {float:left; margin:0; padding:0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $banner = $(".banner").find("ul");
var $bannerWidth = $( window ).width(); //윈도우 창 크기 (배너 이미지 폭)
var $bannerLength = 3;//배너 이미지의 갯수
var $img = $(".banner img");
$banner.css("width", $bannerWidth * $bannerLength + "px");
$img.css("width", $bannerWidth + "px");
var rollingId = setInterval(function() { rollingStart(); }, 4000);//다음 이미지로 롤링 애니메이션 할 시간차
function rollingStart() {
$img = $(".banner img");
$bannerWidth = $( window ).width(); // 중간에 창크기를 변경할 때를 대비해 윈도우창 크기 다시 계산
$img.css("width", $bannerWidth + "px");
$banner.css("width", $bannerWidth * $bannerLength + "px");
//배너의 좌측 위치를 옮겨 준다.
$banner.animate({left: - $bannerWidth + "px"}, 2500, function() { //숫자는 롤링 진행되는 시간이다.
//첫번째 이미지를 마지막 끝에 복사(이동이 아니라 복사)해서 추가한다.
$(this).append("<li>" + $(this).find("li:first").html() + "</li>");
//뒤로 복사된 첫번재 이미지는 필요 없으니 삭제한다.
$(this).find("li:first").remove();
//다음 움직임을 위해서 배너 좌측의 위치값을 초기화 한다.
$(this).css("left", 0);
//이 과정을 반복하면서 계속 롤링하는 배너를 만들 수 있다.
});
}
});
</script>
</head>
<body>
<div class="banner" style="border:1px solid red"> <!-- div 크기를 보기 위한 빨간 테두리 -->
<ul>
<li><img src="roll1.jpg"></li>
<li><img src="roll2.jpg"></li>
<li><img src="roll3.jpg"></li>
</ul>
</div>
DIV 크기를 확인하기 위해 일부러 빨간 테두리를 쳤음.<br>
답변 1
자문자답...해결 했습니다.
.banner 의 height 를 없애고 .banner ul 의 position:relarive 로 변경하니까 되네요...ㅎ
.banner {margin:0 auto; padding:0; overflow:hidden;}
.banner ul {position:relative; margin:0px; padding:0; list-style:none; }
또 다른 문제가 발생하기는 했지만 어쨌든 오늘 질문에 대한 해결방법은 찾았습니다.
왜 머피의 법칙 처럼 꼭 질문을 올리고 나면 해결이 되는지...ㅠ