滚动图片--走马灯

html代码

  <div id="demo" style="overflow: hidden; width: 100%; height: 220px">
        <table
          width="100%"
          border="0"
          align="center"
          cellpadding="0"
          cellspacing="0"
          cellspace="0"
        >
          <tr>
            <td align="center" valign="top" id="demo1">
              <table
                width="100%"
                border="0"
                align="center"
                cellpadding="0"
                cellspacing="10"
                valign="top"
              >
                <tr>
                  <td
                    align="center"
                    valign="top"
                    heiht="220px"
                    v-for="item in 要循环的数据"
                    :key="item.id"
                    style="padding-top: 10px"
                  >
                    <a href="" target="_blank"
                      ><img
                        :src="item.src(图片路径)"
                        style="margin-right: 10px"
                        width="240px"
                        height="200px"
                        border="0"
                        alt=""
                    /></a>
                  </td>
                </tr>
              </table>
            </td>
            <td width="1" valign="top" id="demo2"></td>
          </tr>
        </table>
      </div>

js代码

写在mounted里面

  setTimeout(() => {
      that.$nextTick(() => {
        var speed1 = 20
        demo2.innerHTML = demo1.innerHTML
        function Marquee1() {
          if (demo2.offsetWidth - demo.scrollLeft <= 0)
            demo.scrollLeft -= demo1.offsetWidth
          else {
            demo.scrollLeft++
          }
        }
        var MyMar1 = setInterval(Marquee1, speed1)

        demo.onmouseover = function () {
          clearInterval(MyMar1)
        }

        demo.onmouseout = function () {
          MyMar1 = setInterval(Marquee1, speed1)
        }
      }, 1000)
    })

如果循环的数据是异步请求的数据

  async mounted() {
    await this.getList()
    var that = this
    setTimeout(() => {
      that.$nextTick(() => {

      }, 1000)
    })
  },

在methods中

   async getList() {
      await 请求API()
    },

问题:

这样写就会出现图片五张或者更多是可以正常滚动的,四张就会滚动然后停止,更少的话就会不滚动