这个跑马灯的实现思路其实跟轮播无缝连接的思路是一样的。实现的效果如下(这个软件的水印真的好明显,小小字在跑的就是跑马灯了=.=):
跑马灯的样式和html
<div class="notice-container">
<span class="notice-icon"></span>
<div class="notice-items" ref="noticeBox">
<div class="notice-items-inner" ref="noticeInner">
<p>1、这是第一条跑马灯!!!!!!!!!</p>
<p>2、这是第二条跑马灯!!!</p>
<p>3、这是第三条跑马灯!!!</p>
<p>1、这是第一条跑马灯!!!!!!!!!</p> <!-- 这里是复制第一条数据,以做到无缝衔接 -->
</div>
</div>
</div>