zoukankan      html  css  js  c++  java
  • javascript----无缝新闻轮播

    1、效果图

    2、代码

    <html>
    
    <head>
        <title>轮播新闻</title>
        <style>
        *{
        	margin: 0;
        	padding: 0;
        }
        .goods-best {
             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;
             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) {
             50px;
            margin-left: 10px;
        }
    
        .goods-best .sign .container ul li:nth-child(2) {
             100px;
            text-align: center;
        }
    
        .goods-best .sign .container ul li:nth-child(3) {
             80px;
        }
    
        .goods-best .sign .container ul li:nth-child(4) {
             60px;
            text-align: center;
        }
    
        .goods-best .sign .container ul li:nth-child(5) {
             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 {
             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、总结

    在列表后面添加第一版的内容,当刚好显示最后一班内容的时候跳转,视觉差看不出路已经跳转了。

  • 相关阅读:
    => 运算符
    ASP.NET与Javascript中获取URL信息
    ASP.NET中存取图片到数据库的示例
    在C#中利用DirectX实现声音播放
    使用VS2005 DataSet设计器实现数据访问层
    用C#播放声音文件
    VB.NET中声音的播放
    用C#播放声音文件
    声音播放解决方案(C#)
    Asp.Net音频文件上传和播放
  • 原文地址:https://www.cnblogs.com/SunlikeLWL/p/7798399.html
Copyright © 2011-2022 走看看