文字轮播,无缝滚动

    <script type="text/javascript">
        //文字轮播一
        (function() {
            var l1 =document.getElementById("ccup_left");
            var l2 = document.getElementById("ccup_left_copy");
            var box = document.getElementById("demo-list_left");
              autoScroll();
                    function autoScroll() {
                        console.log(l1);
                        if (l1.offsetHeight > box.offsetHeight) {
                            l2.innerHTML = l1.innerHTML;//克隆list1的数据,使得list2和list1的数据一样
                            scrollMove = setInterval(scrollup, 30);//数值越大,滚动速度越慢
                            box.onmouseover = function () {
                                clearInterval(scrollMove)
                            }
                        }
                    }
                    function scrollup() {
                        //滚动条距离顶部的值恰好等于list1的高度时,达到滚动临界点,此时将让scrollTop=0,让list1回到初始位置,实现无缝滚动
                        if (box.scrollTop >= l1.offsetHeight) {
                            box.scrollTop = 0;
                        } else {
                            box.scrollTop++;
                        }
                    }
                    //鼠标离开时,滚动继续
                    box.onmouseout = function () {
                        scrollMove = setInterval(scrollup, 30);
                    }
        })();
    </script>
<div id="demo-list_left" class="demo-list ">
                            <div id="ccup_left" class="ccup_left">
                                <div class="item_txt">16号楼首层**装验收记录</div>
                                <div class="item_txt">18号楼28*收记录<*/div>
                                <div class="item_txt">19号楼15**记录</div>
                                <div class="item_txt">20号楼20层**录</div>
                                <div class="item_txt">21号楼11层**录</div>
                                <div class="item_txt">22号楼02层**记录</div>
                                <div class="item_txt">23号楼202层**收记录</div>
                                <div class="item_txt">24号楼14层*记录</div>
                                <div class="item_txt">25号楼13层*记录</div>
                                <div class="item_txt">26号楼17层*</div>
                                <div class="item_txt">27号楼03层*录</div>
                                <div class="item_txt">28号楼05层*收记录</div>
                                <div class="item_txt">29楼06层*记录</div>
                                <div class="item_txt">30号楼78层*记录</div>
                                <div class="item_txt">31号楼58层*记录</div>
                                <div class="item_txt">32号楼46层*记录</div>
                                <div class="item_txt">33号楼12层*记录</div>
                                <div class="item_txt">34号楼11层*记录</div>
                            </div>
                            <div id="ccup_left_copy" class="ccup_left_copy">
                            </div>
                        </div>
                    
.demo-list {
    width: 100%;
    position: relative;
    height: 160px;
    overflow: hidden;
}

 

posted @ 2020-10-10 14:09  net开发人员  阅读(340)  评论(0编辑  收藏  举报