当前位置:首页 >> 网络编程

js实现文字向上轮播功能

话不多说,请看实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
 margin:0;
 padding:0;
 }
 .lunbo{
 position: relative;
 width: 600px;
 height: 50px;
 border:1px solid red;
 overflow: hidden;
 }
 ul{
 position:absolute;
 left: 0;
 top:0;
 width: 600px;
 height: auto;
 }
 ul li{
 width: 600px;
 height: 50px;
 line-height: 50px;
 font-size:20px;
 color:#333;
 text-align: center
 }
 </style>
</head>
<body>
 <div class="lunbo">
 <ul>
 <li>人生在世须尽欢 莫使金樽空对月</li>
 <li>我寄愁心与明月,随风直到夜郎西</li>
 <li>不是花中偏爱菊,此花开尽更无花</li>
 <li>辛苦遭逢起一经,干戈寥落四周星</li>
 <li>山河破碎风飘絮,身世浮沉雨打萍。</li>
 <li>惶恐滩头说惶恐,零丁洋里叹零丁。</li>
 <li>人生自古谁无死?留取丹心照汗青。</li>
 </ul>
 </div>
<script src="/UploadFiles/2021-04-02/jquery.js">

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!