HTML背景图片轮播(div)
HTML:<div :style="backgroundUrl===''?'这里可以添加默认背景地址':backgroundUrl">记得加上长度和宽度样式,不然背景图不显示(如果相对于有外层div请根据样式自我调接)</div>方法:mounted () {this.currentUrl()},methods: {currentUrl () {//每三秒更换一次背景图地址
·
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)
}
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)