无缝新闻轮播

Posted 2020-10-13 SunLike阿理旺旺
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝新闻轮播相关的知识，希望对你有一定的参考价值。
1、效果图
2、代码
<html>

<head>
    <title>轮播新闻</title>
    <style>
    *{
    	margin: 0;
    	padding: 0;
    }
    .goods-best {
        width: 979px;
        height: 231px;
        margin: 20 auto 0;
        overflow: hidden;
        box-shadow: 0px 0px 30px 3px gray;
        padding: 0 20px;
    }

    .goods-best .sign {
        height: 192px;
        overflow: hidden;
    }

    .goods-best .sign .container {
        display: block;
        overflow-x: hidden;
    }

    .goods-best .sign .container::after {
        display: block;
        content: "";
        clear: both;
    }

    .goods-best .sign .container ul {
        overflow: hidden;
        width: 420px;
    }

    .goods-best .sign .container ul li {
        overflow: hidden;
        text-align: left;
        margin-right: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .goods-best .sign .container ul li:nth-child(1) {
        width: 50px;
        margin-left: 10px;
    }

    .goods-best .sign .container ul li:nth-child(2) {
        width: 100px;
        text-align: center;
    }

    .goods-best .sign .container ul li:nth-child(3) {
        width: 80px;
    }

    .goods-best .sign .container ul li:nth-child(4) {
        width: 60px;
        text-align: center;
    }

    .goods-best .sign .container ul li:nth-child(5) {
        width: 80px;
        margin-right: 0;
    }

    .goods-best .mt {
        height: 40px;
        line-height: 40px;
        z-index: 1;
        border: 1px #e4e0e0 solid;
        border-bottom: none;
        margin-bottom: 10px;
        border-top: none;
    }

    .goods-best .mt h2 {
        width: 74px;
        font-size: 15px;
        display: inline-block;
        background: #fff;
        z-index: 2;
        color: #000;
        padding-left: 20px;
        font-weight: bold;
    }

    .sign ul {
        margin-bottom: 14px;
        margin-right: 50px;
        float: left;
        height: 18px;
        line-height: 18px;
        background-color: #C6C6C6;
    }

    .sign ul li {
        float: left;
        color: #333;
        font-size: 13px;
    }

    .sign ul li a {
        color: #e31939;
        text-decoration: none;
    }
    </style>
     /*jquery引入*/
    <script>
 $(function() {
    $(function() {
        lateSignUpSlideEvent();
    })
    function lateSignUpSlideEvent() {
        var container = $(".goods-best .sign .container");
        var clock;
        var interval = 10;
        var dir = 0;
        var lists = container.find("ul");
        var account = Math.ceil(lists.length / 2)-6;
        var lineH = 32;
        var seeH = 192;
        var conH = account * lineH;
        clock = setInterval(function() {
            if (dir <= conH) {
                console.log(dir + "--" + conH);
                container.attr("style", "transform:translateY(" + (-dir) + "px);");
                dir++;
                if (dir == conH) {}
            } else {
                dir = 0;
            }
        }, interval);
    }
}())
    </script>
</head>

<body>
    <div class="goods-best" id="os_new">
        <div class="mt">
            <h2>最新报名</h2>
        </div>
        <div class="sign">
            <div class="container">
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马1系423432432432432432432432432</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马2系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马3系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马4系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马5系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马6系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马7系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马8系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马9系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马10系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马11系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马12系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马13系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马1系423432432432432432432432432</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马15系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马16系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马17系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马18系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马19系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马20系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马21系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马22系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马23系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马24系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马25系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马26系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马27系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马28系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马29系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马30系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马1系423432432432432432432432432</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马2系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马3系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马4系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马5系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马6系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马7系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马8系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马9系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马10系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马11系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
                <ul>
                    <li>黄志祥</li>
                    <li><a href="http://www.vvip-shopping.cn/">宝马12系</a></li>
                    <li>183****5475</li>
                    <li>广州</li>
                    <li>2分钟前</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
3、总结
在列表后面添加第一版的内容，当刚好显示最后一班内容的时候跳转，视觉差看不出路已经跳转了。
以上是关于无缝新闻轮播的主要内容，如果未能解决你的问题，请参考以下文章
JS 轮播图（无缝连接的轮播图实现，含代码供参考）
每天学一个jquery插件-无缝的轮播
jQuery插件版无缝轮播，重写了之前的代码，显得更高大上一点
banner轮播无缝滚动万金油jq代码
带无缝滚动的轮播图（含JS运动框架）
使用js和css-transition属性57行代码实现简易无缝轮播图