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="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
 function lunbo(id,height){
  var ul=$(id);
  var liFirst=ul.find('li:first');
  $(id).animate({top:height}).animate({"top":0},0,function(){
  var clone=liFirst.clone();
  $(id).append(clone);
  liFirst.remove();
  })
 }
 setInterval("lunbo('ul','-50px')",3000)
</script>
</body>
</html>

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

# 文字向上轮播 # js实现文字向上滚动 # jquery # 实现文字轮播 # js实现的文字横向无间断滚动 # 浅析js 文字滚动效果 # JS实现单行文字不间断向上滚动的方法 # js文字横向滚动特效 # js实现文字滚动效果 # JS实现div内部的文字或图片自动循环滚动代码 # js 上下文字滚动效果 # 原生JS实现旋转轮播图+文字内容切换效果【附源码】 # JavaScript实现标题栏文字轮播效果代码 # JS实现排行榜文字向上滚动轮播效果 # 人生自古谁无死 # 山河破碎 # 花开 # 人生在世 # 随风 # 多说 # 无花 # 夜郎 # 雨打 # 丹心照 # position # ul # left # absolute # relative # border # red # solid # height # width

返回目录在线咨询

上一篇：朝阳行业百科,2025北京遗属公示怎么查？
下一篇：PHP全能建站系统中SEO优化的最佳实践是什么？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

js实现文字向上轮播功能

您的项目需求