js之跑马灯广告

最新推荐文章于 2025-07-13 14:09:00 发布

weixin_33691817

最新推荐文章于 2025-07-13 14:09:00 发布

阅读量394

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wenxianfeng/p/10185077.html

本文介绍了一种使用HTML和JavaScript实现动态跑马灯效果的方法，通过每隔1.5秒将广告文字的第一个字符移动到末尾，达到滚动显示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标效果：每过1秒重复把广告的第一个字符放到最后，达到动态跑马灯效果

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="txt" style="color: white;background-color: red;text-align: center;font-size: 50px;">大甩卖</div>
 9     <script type="text/javascript">
10         setInterval(function ()//通过定时器重复动作
11         {
12             var oTxt = document.getElementById('txt'); //获取标签
13             var txt = oTxt.innerText; //获取标签文本内容
14             // console.log(typeof txt)  页面控制台查看是string
15             var first_i = txt[0]; //字符串索引取值
16             var last_i = txt.slice(1,txt.length);//字符串切片
17             var new_txt = last_i + first_i;//字符串拼接
18             oTxt.innerText = new_txt; //拼接后的字符串放到标签文本内容
19         },1500)
20     </script>
21 </body>
22 </html>