jQuery 롤링배너에서 height 자동 조절..

jQuery 롤링배너에서 height 자동 조절..

QA

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; }


또 다른 문제가 발생하기는 했지만 어쨌든 오늘 질문에 대한 해결방법은 찾았습니다.

왜 머피의 법칙 처럼 꼭 질문을 올리고 나면 해결이 되는지...ㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT