js无缝滚动跑马灯

本文转载自查看原文 2019-03-31 22:52 629 css/ web/ js/ jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动跑马灯</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    ul li{
        list-style:none;
    }
    .main{
        width: 300px;
        height:100px;
        margin:100px auto;
        position: relative;
        overflow: hidden;
    }
    .main li{
        float: left;
        width:100px;
        height:100px;
    }
    .main ul{
        width:300px;
        height:100px;
        position: absolute;
        left:0;
        top:0;
    }
    .main li:nth-child(odd){
        background-color: red;
    }
    .main li:nth-child(even){
        background-color: blue;
    }

</style>
<body>
    <div class="main">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
<script>
    $(".main ul").append($(".main ul").html());
    $(".main ul").width($(".main ul").width()*2);
    $(function(){

        setInterval("my_left();",10);
    });


    var left = 0;
    function my_left(){


        left -= 20;
        if(left <= -300){
            left = 0;
        }
        console.log(left);
        $('.main ul').animate({'left':left});
    }
</script>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 JS 无缝跑马灯 marquee标签实现跑马灯效果--无缝滚动 liMarquee – jQuery无缝滚动插件（制作跑马灯效果） js实现图片无缝循环跑马灯使用JS实现图片轮播滚动跑马灯效果 js抽奖，跑马灯 js文字跑马灯 android 公告滚动（跑马灯效果） flutter 跑马灯横向纵向滚动 VUE 文字跑马灯（文本滚动）