html简单的跑马灯效果

Posted 2022-07-28 小溪彼岸

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html简单的跑马灯效果相关的知识，希望对你有一定的参考价值。

很多项目中都会遇到有类似跑马灯效果的消息轮播展示，做了一个简单的消息轮播展示。
主要代码如下：
html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="g-winner-roll">
    <img src="img/tongzhi.png">
    <div class="m-countdown">

    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

css


.g-winner-roll
    height: 30px;
    border-bottom: 1px solid #d3d3d3;
    background-color: #ffffff;


.g-winner-roll img
    float: left;
    margin-left: 10px;
    margin-top: 7px;
    display: block;
    width: 15px;
    height: 15px;

.m-countdown
    margin-left: 25px;
    width: 100%;
    height: 30px;


.m-countdown > a
    text-align: left;
    margin-left: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    position:absolute;
    display: none;


.m-countdown > a:first-child
    display: block;


.m-countdown > a >span
    color: rgb(128,128,128);
    height: 30px;

index.js

/**
 * Created by rayootech on 16/8/6.
 */
$(function()
    var list = ["跑马灯效果数据1","跑马灯效果数据2","跑马灯效果数据3","跑马灯效果数据4","跑马灯效果数据5","跑马灯效果数据6"];
    var htmlString ="";
    for(var i=0;i<list.length;i++)
        htmlString += '<a href="#"><span>'+list[i]+'</span></a>';
    
    $(".m-countdown").html(htmlString);
    showRollling();
);
function showRollling()
    var height = 40;    //这个数字是轮播图片的高度
    var animationTime = 600; //这个数字是动画时间
    var marginTime = 2000; //这个数字是间隔时间
    var nowimg = 0;     //信号量
    var mytimer = null;
    //将图片列表中的第一个节点复制，然后追加到队列的最后。
    //$(".m-countdown a:first-child").clone().appendTo(".m-countdown");

    var mytimer = window.setInterval(
        function()
            youanniu();
        
        ,marginTime
    );
    <!--计时器暂停方法-->
    // window.clearInterval(mytimer);
    // mytimer = window.setInterval(
    function youanniu()
        if(!$(".m-countdown a").is(":animated"))
            //折腾信号量
            if(nowimg < $(".m-countdown a").length - 1)
                nowimg = nowimg + 1;
                showAnimate(nowimg);
            else
                nowimg = 0;
                $(".m-countdown a").each(function(index)
                    if(index==0)
                        $(this).css("display","block");
                    
                    else 
                        $(this).css("display","none");
                    
                ).css("top","7px");
            
        
    
    function sho![这里写图片描述](http://img.blog.csdn.net/20160807012707902)wAnimate(index) 
        $(".m-countdown a").eq(index).css("display","block");
        $(".m-countdown a").eq(index-1).animate(
            
                "top": -height * nowimg
            
            , animationTime
        );

效果：

以上是关于html简单的跑马灯效果的主要内容，如果未能解决你的问题，请参考以下文章