[jQuery] flow banner (흐르는 배너, footer banner)

대부분 관공서나 공단 사이트를 보면 하단 footer 부분에 흐르는 배너를 볼 수 있습니다.

저는 이 명칭을 flow banner라고 멋데로 짓고 나중을 위해 소스를 올리려 합니다.

소스는 다음과 같습니다.

HTML

<!-- footer_banner -->
<div class="footer_banner_zone">
    <h3 class="blind">관련사이트</h3>
 
    <!-- banner -->
    <div class="flow_banner_box">
        <div id="banner" class="flow_bann_area">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/footer_banner_img_01.jpg" alt="banner_01" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/footer_banner_img_02.jpg" alt="banner_02" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/footer_banner_img_03.jpg" alt="banner_03" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/footer_banner_img_04.jpg" alt="banner_04" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/footer_banner_img_05.jpg" alt="banner_05" />
                    </a>
                </li>
 
                <li>
                    <a href="#">
                        <img src="./images/footer_banner_img_06.jpg" alt="banner_06" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/footer_banner_img_07.jpg" alt="banner_07" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/footer_banner_img_01.jpg" alt="banner_01" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/footer_banner_img_02.jpg" alt="banner_02" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/footer_banner_img_03.jpg" alt="banner_03" />
                    </a>
                </li>
            </ul>
        </div>
 
        <!-- controll -->
        <div class="flow_ctrl_box">
            <a href="#" id="banner_left" class="back"><span class="blind">이전</span></a>
            <a href="#" id="banner_right" class="next"><span class="blind">다음</span></a>
            <a href="#" id="banner_play" class="play"><span class="">재생</span></a>
            <a href="#" id="banner_pause" class="stop"><span class="">멈춤</span></a>
        </div>
        <!-- //controll -->
    </div>
    <!-- //banner -->
 
</div>
<!-- //footer_banner -->

CSS

/* banner */
.footer_banner_zone{position:relative; width:100%; background:#f8f8f8; padding:15px 0;}
.footer_banner_zone .flow_banner_box{position:relative; width:1000px; margin:0 auto; background:#fff; height:66px;}
.footer_banner_zone .flow_banner_box .flow_bann_area{position:absolute; top:8px; left:50%; margin-left:-447px;}
.footer_banner_zone .flow_banner_box .flow_bann_area ul{*zoom:1;}
.footer_banner_zone .flow_banner_box .flow_bann_area ul:after{content:""; display:block; clear:both;}
.footer_banner_zone .flow_banner_box .flow_bann_area ul li{float:left; padding-right:9px;}
.footer_banner_zone .flow_banner_box .flow_bann_area ul li a{}
.footer_banner_zone .flow_banner_box .flow_bann_area ul li a img{border:1px solid #f2f2f2;}

/* btn */
.flow_ctrl_box{}
.flow_ctrl_box a{position:absolute; top:20px;  width:16px; height:26px; background-image:url(./images/flow_ctrl_side_btn.gif);}
.flow_ctrl_box a.back{left:18px; background-position:0 0;}
.flow_ctrl_box a.next{right:18px; background-position:16px 0;}
.flow_ctrl_box a.play{background:none; width:auto; height:auto; top:0; left:-30px; font-size:13px; color:#fff; background:#333; border-radius:15px; text-decoration:none; padding:5px 10px;}
.flow_ctrl_box a.stop{background:none; width:auto; height:auto; top:31px; left:-30px; font-size:13px; color:#fff; background:#333; border-radius:15px; text-decoration:none; padding:5px 10px;}

JavaScript

jQuery(function() {
 
    $("#banner ul").carouFredSel({
        align : "left",
        width : 896, // 가로길이
        height : 51, // 세로길이
        items : {
        visible : 6 // 보여지는 갯수 (5개가 보여진다면 +1을 하여 버블링 효과를 막는다.)
        },
        scroll : {
        items : 1, // 롤링넘어가는 갯수
        duration : 800, //롤링 속도
        pauseOnHover : false // 마우스 오버시 롤링멈춤 true, 롤링작동 false
        },
        next : "#banner_right", // 오른쪽으로 이동 버튼
        prev : "#banner_left", // 왼쪽으로 이동 버튼
        direction : "left" // 롤링 방향
    });
 
    $("#banner_pause").click(function(){
        $("#banner ul").trigger("pause");
        $("#banner_stop").hide();
        $("#banner_start").show();
        return true;
    });
 
    $("#banner_play").click(function(){
        $("#banner ul").trigger("play", 1);
        $("#banner_stop").show();
        $("#banner_start").hide();
        return true;
    });
 
});

View

File

흐르는 하단 배너.zip

참고하여 사용 바랍니다. ^^