制作一个图片条幅跑马灯

利用图片制作跑马灯效果

直接上代码，跟文字跑马灯一样。
WXML：
其实也是利用了我们的轮播图原理。

<!-- wxml -->
<swiper class='u-wrp-bnr' autoplay='true' interval='0' duration='2000' circular='true'>
  <block wx:for="{{light}}" wx:for-index="index">
    <swiper-item>
      <image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image>
    </swiper-item>
  </block>
</swiper>

WXSS

.u-wrp-bnr {
  width: 100%;
  height: 80rpx;
  display: block;
  position: relative;
  top: 100rpx;
  background: #f0f0f0;
}
.u-img-slide {
  width: 100%;
  height: inherit;
}

JS

Page({
 data:{
   "light": [{
     "url": "https://6d69-mini-p-nbnvq-1300763744.tcb.qcloud.la/happy%20new%20year/img01.jpg?sign=356aafaf864b0561f2a926acadef03ee&t=1578995177"
   }, {
       "url": ""
   }, {
       "url": "https://6d69-mini-p-nbnvq-1300763744.tcb.qcloud.la/happy%20new%20year/%E7%94%B5%E5%95%86%E6%B7%98%E5%AE%9D%E6%96%B0%E6%98%A5%E5%96%9C%E5%BA%86%E7%BA%A2%E8%89%B2%E6%96%B0%E5%B9%B4%E7%8C%AA%E5%B9%B4%E5%BA%97%E6%8B%9B78.jpg?sign=91063501d5cae4b2d6ad45973c329473&t=1578995590"
   },{
     "url":""
   }]
 }
 
})