文字从上到下无缝轮播，一直循环滚动轮播

最新推荐文章于 2024-05-10 08:50:53 发布

zhl_cafe_noir

最新推荐文章于 2024-05-10 08:50:53 发布

阅读量1.2w

点赞数 4

分类专栏：前端文章标签：文字轮播循环轮播

本文链接：https://blog.csdn.net/zhl_cafe/article/details/53483095

版权

前端专栏收录该内容

31 篇文章 2 订阅

订阅专栏

思路：无缝循环轮播，是一个轮播框（父节点）包含两个子节点，其中一个子节点是文字主体，另一个是这个子节点的复制品，即：在父类节点一定的高度下，这两个子节点实现由下而上的滚动。

贴代码前说下大家一般遇到的问题：不滚动或者滚动一段时间后不循环？

此问题的的症结在于父类节点的高度，解决思路为：

css先给轮播框一定的高度，js判断如果子节点主体文字的高度小于父类轮播框的高度，则轮播框父节点随子节点主体文字的高度而动态变化。

废话不多说，直接上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文字从下到上无缝轮播</title>
    <style>
        #rollCon{width: 80%;text-align: center;display: block;overflow: hidden;color: black;height: 35%;position: absolute;top: 55%;left: 10%;}
        #rollSubject{height: auto;}
        #rollCopy{height: auto;}
    </style>
</head>
<body>
<div id="rollCon">
    <div id="rollSubject">
        <p>骑着单车的我俩</p>
        <p>怀紧贴背的拥抱</p>
        <p>难离难舍想抱紧些</p>
        <p>茫茫人生好象荒野 </p>
        <p>如孩儿能伏于爸爸的肩膊 </p>
        <p>谁要下车 </p>
    </div>
    <div id="rollCopy"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
    var rollCon = document.getElementById('rollCon');
    var rollSubject = document.getElementById('rollSubject');
    var rollCopy = document.getElementById('rollCopy');
    rollCopy.innerHTML = rollSubject.innerHTML;
    if(($('#rollSubject').height()>0)&&($('#rollSubject').height()<$('#rollCon').height())){
        $('#rollCon').css('height',$('#rollSubject').height());
        setInterval(Marquee, 50);
    }else if(($('#rollSubject').height()>0)&&($('#rollSubject').height()>=$('#rollCon').height())){
        setInterval(Marquee, 50);
    }
    function Marquee() {
        if ((rollCopy.offsetTop-rollSubject.offsetTop)<rollCon.scrollTop)
            rollCon.scrollTop =0;
        else {
            rollCon.scrollTop++;
        }
    }
</script>
</body>
</html>

或者点此下载

zhl_cafe_noir

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
文字从上到下无缝轮播，一直循环滚动轮播

思路：无缝循环轮播，是一个轮播框（父节点）包含两个子节点，其中一个子节点是文字主体，另一个是这个子节点的复制品，即：在父类节点一定的高度下，这两个子节点实现由下而上的滚动。贴代码前说下大家一般遇到的问题：不滚动或者滚动一段时间后不循环？此问题的的症结在于父类节点的高度，解决思路为：css先给轮播框一定的高度，js判断如果子节点主体文字的高度小于父类轮播框的高度，则轮播框父节点随子节
复制链接

扫一扫