HTML背景图片轮播(div)

HTML:

 <div :style="backgroundUrl===''?'这里可以添加默认背景地址':backgroundUrl">
记得加上长度和宽度样式,不然背景图不显示(如果相对于有外层div请根据样式自我调接)
 </div>

方法:

  mounted () {
    this.currentUrl()
  },
  methods: {
      currentUrl () {
      //每三秒更换一次背景图地址
      setInterval(this.comparison, 3000)
    },
    comparison () {
    //index、backgroundUrl 都是在return里设置的默认值index默认0,backgroundUrl 默认''
      if (this.pictures.length > 0) {
        let i = this.pictures.length
        if (this.index >= i) {
          this.index = 0
        }
        this.backgroundUrl = 'background-image:url( http://localhost:8080/ioam/file/' + this.pictures[this.index].url + ')'
        this.index = this.index + 1
        console.log(this.index)
      }
    }
  }

你可能感兴趣的:(html)