its-web-server/src/main/webapp/WEB-INF/jsp/egovframework/tiles/footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<footer>
   	<div class="count"></div>
    <section>
        <a class="f-logo">평택시 교통정보센터</a>
        <p>
            <a href="https://www.pyeongtaek.go.kr/pyeongtaek/contents.do?mId=0702010000" target="_blank" rel="noopener noreferrer">개인정보처리방침</a>
            <a href="https://www.pyeongtaek.go.kr/pyeongtaek/contents.do?mId=0703000000" target="_blank" rel="noopener noreferrer">이메일수집거부</a>
        </p>
        <p>경기도 평택시 죽백동 죽백4로 21</p>
        <p>평택시 대표/민원 문의 : 031-8024-5000, 교통정보센터 홈페이지 문의 : 031-8053-1536</p>
        <p>Copyright ⓒ PYEONGTAEK Regional Construction of Management Office.<span>All rights reserved.</span></p>
    </section>
    <div class="incd-scroll-box"></div>
</footer>
<script type="text/javascript">
    footerInterval();

    var initInterval;
    var incdRollingTimer;

    function footerInterval() {
        getVisitCount();
        getRollingIncdData();
        if (initInterval) clearInterval(initInterval);
        initInterval = setInterval(()=>{
            footerInterval();
        }, 5 * 60 * 1000);
    }


    function getRollingIncdData() {
        $.ajax({
            type: "POST",
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            url: '/common/getIncdOcrr.do',
            success : function (data) {
                const pathname = window.location.pathname;
                const isShow = pathname === '/main/main.do' || pathname === '/traffic/incd.do';
                if (isShow) {
                    if (_IncdOcrrArr.length) {
                        _IncdOcrrArr.forEach((obj)=>{
                            obj.incdMarker.setMap(null);
                        });
                        _IncdOcrrArr = [];
                    }
                    if (_IncdInfoWindow) {
                        _IncdInfoWindow.setMap(null);
                        _IncdInfoWindow = null;
                    }

                    if (_IncdOverlay) {
                        _IncdOverlay.setMap(null);
                        _IncdOverlay = null;
                    }
                }
                let str = '';
                if (data.length <= 0) {
                    str = '<div class="incd-empty">돌발 상황 없음</div>';
                }
                else {
                    for (let obj of data) {
                        if (!obj) {
                            continue;
                        }
                        const {
                            incd_ocrr_id,
                            link_id,
                            incd_strt_dt,
                            incd_end_prar_dt,
                            road_name,
                            incd_titl,
                            incd_expl,
                            incd_type_code,
                            cmmn_cd_kor_nm,
                            x_crdn,
                            y_crdn
                        } = obj;

                        if (isShow) {
                            _IncdOcrrArr.push(new _IncdOcrrObj(
                                incd_ocrr_id,
                                link_id,
                                incd_strt_dt,
                                incd_end_prar_dt,
                                road_name,
                                incd_titl,
                                incd_expl,
                                incd_type_code,
                                cmmn_cd_kor_nm,
                                x_crdn,
                                y_crdn
                            ));
                        }


                        str +=`
                            <div class="incd-box"
                                  onmouseover="stopRolling()"
                                  onmouseleave="footerRolling(\${data.length})"
                                  onclick="incdClick('\${incd_ocrr_id}')"
                                  title="\${incd_titl}">
                                <div class="incd-scroll-title">\${incd_titl}</div>
                                <div class="incd-scroll-container">
                                    <div>
                                        <div>설명 : </div>
                                        <div>\${incd_expl}</div>
                                    </div>
                                    <p>기간 : \${incd_strt_dt}
                                        - \${incd_end_prar_dt}</p>
                                </div>
                            </div>`;
                    }
                    footerRolling(data.length);
                }

                if (isShow) {
                    showIncd();
                }
                $('.incd-scroll-box').html(str);
            },
            error : function (err) {
                alert('getIncdOcrr ajax error');
            }
        })
    }

    function stopRolling() {
        // clearInterval(incdRollingTimer);
        cancelAnimationFrame(incdRollingTimer);
    }

    function incdClick(id) {
         if (_InciFlag) {
            $('#inciInfo').click();
        }
        _IncdOcrrArr.forEach((item)=>{
            if (item.incd_ocrr_id === id) {
                item.incdClickEvt();
            }
        })
    }

    let idx    = 1;
    function footerRolling(length) {
        let margin = 90;
        if (length > 1) {
            if (incdRollingTimer) cancelAnimationFrame(incdRollingTimer);
            // if (incdRollingTimer) clearInterval(incdRollingTimer);
            // incdRollingTimer = setInterval(()=>{
            //     const scrollBox = $('.incd-scroll-box');
            //     if (document.hasFocus()) {
            //         scrollBox.animate({
            //             marginTop : '-'+margin +'px',
            //         }, 500, ()=>{
            //             scrollBox.children().eq(0).appendTo(scrollBox);
            //             scrollBox.css('margin-top', 0);
            //         });
            //     }
            // }, 3000);
            let start = new Date().getTime();
            function rolling() {
                let ts = new Date().getTime();
                if (ts - 3000 >= start) {
                    const scrollBox = $('.incd-scroll-box');
                    scrollBox.animate({
                        marginTop : '-'+margin +'px',
                    }, 500, ()=>{
                        scrollBox.children().eq(0).appendTo(scrollBox);
                        scrollBox.css('margin-top', 0);
                    });
                    start = new Date().getTime();
                }
                incdRollingTimer = requestAnimationFrame(rolling);
            }
            incdRollingTimer = requestAnimationFrame(rolling);

        }
    }
</script>