摘抄自扬帆向海的博客，点击这里查看原文
跑马灯就是这条信息串首尾相连，向一个方向循环滚动。。。
使用js实现
实现逻辑：
① 根据id值获取标签
② 获取标签的文本内容
③ 截取文本内容的第一个字
④ 截取文本内容第一个字后面的所有内容
⑤ 把第③步截取的第一个字拼接到第④步截取的文本内容后面
⑥ 将第⑤步拼接后的字符串写入到第①步的标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯js实现跑马灯效果</title>
<style>
.btn-start {
text-align: center;
color: white;
background-color: green;
font-size: 15px;
margin-top: 10px;
}
.btn-stop {
text-align: center;
color: white;
background-color: red;
font-size: 15px
}
.btn-wrap {
margin: 10px auto;
width: 32%;
}
#str {
background-color: rgb(116, 114, 231);
color: white;
font-size: 35px;
width: 32%;
margin: auto;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div id="str">欢迎访问扬帆向海的博客!!!</div>
<div class="btn-wrap">
<button class="btn-start">
<span onclick="start()">动起来</span>
</button>
<button class="btn-stop">
<span onclick="stop()">停下来</span>
</button>
</div>
<script type="text/javascript">
var intervalId = null;
var timerId = null;
$(function () {
initTimer();
})
function start() {
// 判断定时器id是否为空
if (intervalId != null) {
return
}
intervalId = setInterval(function () {
var label = document.getElementById('str');
var text = label.innerText;
var begin = text.substring(0, 1);
var end = text.substring(1);
var text_new = end + begin;
label.innerText = text_new;
}, 200);
}
function stop() {
// 清除定时器
clearInterval(intervalId);
// 把定时器id置为空
intervalId = null;
}
function initTimer() {
// 设置在指定2秒后执行
timerId = setTimeout(function () {
start();
}, 2000);
}
</script>
</body>
</html>