JQuery 制作文字轮播

来源：互联网发布：type3浮雕雕刻软件编辑：程序博客网时间：2024/06/06 08:36

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

思路: 先给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();    })();

这边有三个li标签 ul标签的宽度为500px
所以三个li标签的位置分别为 500px 1000px 1500px

使用JQuery的animate()方法改变每个li标签的位置分别为 -1500px -1000px -500px
再在回调函数中再次调用positionli()定位li标签的位置和lunbo()实现循环轮播

阅读全文

0 0