一直无缝滚动的轮播图模板

enjoy_Day

于 2021-07-15 14:06:54 发布

阅读量197

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_28080659/article/details/118758112

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .lunbo {
            /* 注意这里要设置相对定位，不然子元素ul会脱离父元素控制 */
            position: relative;
            top: 400px;
            left: 550px;
            /* 需要设置宽高，否则overflow不起作用 */
            width: 600px;
            /* 高度要和li高度一致，这样会显示一条；如果设置是li的倍数，则同时显示多条；如果不是倍数，则会产生下一条出现，上一条没消失的效果 */
            height: 60px;
            border: 1px solid blue;
            background: lightblue;
            overflow: hidden;
        }
        
        ul {
            /* 注意这里要设置绝对定位，不然不能移动top */
            position: absolute;
            left: 0;
            top: 0;
            width: 600px;
            height: auto;
        }

        ul li {
            width: 600px;
            /* 注意这个高度和父元素lunbo的高度要一致 */
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            color: #333;
            text-align: center
        }
    </style>

</head>
<!-- 这种方式在纯js开发的情况下可正常克隆点击事件，但在reactjs，vuejs中即使clone（true）第一遍轮询完后，第二遍点击事件失效：初步
判定原因为react虚拟dom克隆事件消失导致-->
<body>
    <div class="lunbo">
        <ul>
            <li>风萧萧兮易水寒</li>
            <li>壮士一去兮不复还</li>
            <li>大风起兮云飞扬</li>
            <li>威加海内兮归故乡</li>
            <li>安得猛士兮守四方！</li>
        </ul>
    </div>
    <script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
    <script>
        function run(height, time) {
            $("ul").stop().animate({
                top: 0
            }, 0).animate({
                top: height
            }, time, 'linear', function () {
                run(height, time);
            });
        }

        function startLunbo(){
            // 计算li数量，并设置要上移的距离， 50是每个li的高度
            var size = $("ul li").size();
            var height = size*-40 + 'px';
            // 将第一个复制到最后
            $("ul").append($("ul li:first").clone(true));
            // 计算整体滚动时间,2000其实和li的高度也有关，需要调整
            var time = size * 2000;
            run(height, time);
        }
        startLunbo();
    </script>
</body>
</html>

代码内部有详细的介绍，无需多言

enjoy_Day

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一直无缝滚动的轮播图模板

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .lunbo { /* 注意这.
复制链接

扫一扫