微信小程序如何实现跑马灯效果？

跑马灯效果比较常见，一般做电商类的小程序，都会用到，所以代码君今天特地写一篇文章，来教一下大家，如何去实现跑马灯效果，下面是代码君实现的效果，可以先看一下！

跑马灯效果的制作

制作方式很简单，先方上代码，后面会对代码详细讲解
一、wxml界面的实现

 <!-- 跑马灯效果  -->
    <view class="example">
      <view class="marquee_box">
        <view class="marquee_text" style="{
  {orientation}}:{
  {marqueeDistance}}px;font-size: {
  {size}}px;">
          <image src="{
  {adUrl}}" class='ad-image' />{
  {text}}
        </view>
      </view>
    </view>

界面布局很简单，一个底部背景容器，加入一个广播图片和对应的跑马灯文字

二、wxss样式

.example {
  display: block;
  width: 100%;
  height