html简单的跑马灯效果

很多项目中都会遇到有类似跑马灯效果的消息轮播展示,做了一个简单的消息轮播展示。
主要代码如下:
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[i]+'';
    }
    $(".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基础)