JQuery 制作文字轮播

最新推荐文章于 2020-05-29 19:47:05 发布

w魏什么

最新推荐文章于 2020-05-29 19:47:05 发布

阅读量3.9k

点赞数

分类专栏： jquery 文章标签： jquery javascript 动画

本文链接：https://blog.csdn.net/wei_ruibo/article/details/78783945

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文字轮播
公告栏的滚动效果

思路: 先给li标签定位然后通过JQuery 的animate()方法执行动画效果,是li标签的位置不断变化,从而实现从右到左的轮播效果

先上html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字轮播</title>
    <script src="js/jquery190.js" language="javascript" type="text/javascript"></script>

    <style>
        .new_div {
            width: 500px;
            height: 20px;
            position: absolute;
            left: 50px;
            top: 100px;
        }

        .ul_sty {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
            padding-left: 0px;
            margin-top: 0px;
            border: 1px solid #e0dddd;
            border-radius: 8px;
        }

        .li_sty {
            font-size: 14px;
            position: absolute;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: red;
            margin-left: 5px;
        }
    </style>

</head>
<body>
<div class="new_div">
    <ul class='ul_sty' id="loopnew">
        <li class="li_sty">
            公告1
        </li>
        <li class="li_sty">
            公告2
        </li>
        <li class="li_sty">
            公告3
        </li>
    </ul>
</div>
</body>

首先给每个li标签定好位置

(function () {

        var $ul = $("#loopnew");
        //获得ul长度
        var ulwidth = $("#loopnew").width();

        //给li定位 起始位置
        function positionli() {
            $ul.find("li").each(function () { var index = $(this).index(); var left = index * ulwidth + ulwidth; $(this).css({left: left}); });
        }


        //轮播
        function lunbo() {
            $ul.find("li").each(function () { var liindex = $(this).index(); var lastleft = -($ul.find("li").length - liindex) * ulwidth $(this).animate({left: lastleft}, 10000, 'linear', function () { positionli(); lunbo(); }); });
        }
        positionli();
        lunbo();

    })();