一般我們需要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的跑馬燈，我們可以使用<marquee></marquee>標(biāo)簽凌盯，但是會(huì)存在一個(gè)問(wèn)題付枫，輪播的時(shí)候并不是連續(xù)的，循環(huán)播放的時(shí)候中間有段時(shí)間會(huì)出現(xiàn)白色空白驰怎。
image
那么有沒(méi)有什么辦法讓循環(huán)播放的時(shí)候中途不出現(xiàn)空白呢阐滩？具體實(shí)現(xiàn)代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑馬燈</title>
<style>
.wrapper{
overflow: hidden;
white-space: nowrap;
width: 500px;
border: solid 1px #000;
}
.content{
display: inline-block;
}
</style>
</head>
<body>
<div id="wrapper" class="wrapper" onmouseover="stopQu()" onmouseout="startQu()">
<div id="content" class="content">
我是內(nèi)容，可以是文字县忌，也可以是圖片掂榔，都行，但是注意此div中的內(nèi)容加起來(lái)需要比滾動(dòng)區(qū)域長(zhǎng)
</div>
<!-- 這個(gè)需要和上面的內(nèi)容一樣就可以了 -->
<div class="content">
我是內(nèi)容症杏，可以是文字装获，也可以是圖片，都行厉颤，但是注意此div中的內(nèi)容加起來(lái)需要比滾動(dòng)區(qū)域長(zhǎng)
</div>
</div>
<script>
//定時(shí)器id
var timer;
//頁(yè)面加載完成之后執(zhí)行
window.onload= init()
function init(){
console.log(document.getElementById("content").clientWidth)
var wrapper = document.getElementById("wrapper");
var content = document.getElementById("content");
var contentWidth = content.clientWidth;
timer = window.setInterval(function () {
wrapper.scrollLeft++;
console.log(wrapper.scrollLeft)
if (wrapper.scrollLeft >= contentWidth) {
wrapper.scrollLeft = 0;
}
}, 20)
}
//停止?jié)L動(dòng)
function stopQu(){
window.clearInterval(timer);
}
//重新滾動(dòng)
function startQu(){
init();
}
</script>
</body>
</html>
注意：滾動(dòng)區(qū)域的內(nèi)容需要比滾動(dòng)區(qū)域的大小大
以上是普通的html文件的寫(xiě)法穴豫，那如果是vue組件如何編寫(xiě)呢？在vue里面實(shí)現(xiàn)這個(gè)會(huì)有一個(gè)有關(guān)$refs的坑逼友，巨坑＞唷３由！司抱，下面我們來(lái)寫(xiě)一下在vue里的實(shí)現(xiàn)筐眷，跳過(guò)這個(gè)坑。(ref相關(guān)的內(nèi)容請(qǐng)自行查看vue官網(wǎng))
<template>
<div ref="wrapper" class="wrapper" @mouseenter="stopQu()" @mouseleave="startQu()">
<div ref="content" class="content">
我是內(nèi)容状植，可以是文字浊竟，也可以是圖片怨喘，都行津畸，但是注意此div中的內(nèi)容加起來(lái)需要比滾動(dòng)區(qū)域長(zhǎng)
</div>
<!-- 這個(gè)需要和上面的內(nèi)容一樣就可以了 -->
<div class="content">
我是內(nèi)容，可以是文字必怜，也可以是圖片肉拓，都行，但是注意此div中的內(nèi)容加起來(lái)需要比滾動(dòng)區(qū)域長(zhǎng)
</div>
</div>
</template>
<script>
export default {
name: "marquee",
data(){
return {
timer: ''
}
},
mounted() {
/**
* 必須這樣寫(xiě)Ｊ崆臁Ｅ尽！
* 原因是在mounted鉤子函數(shù)中 console.log(this.$refs.wrapper) 結(jié)果為undifined,無(wú)法使用this.$refs
*/
setTimeout(() => {
this.marquee()
}, 1000)
},
methods:{
marquee(){
let wrapper = this.$refs.wrapper;
let content = this.$refs.content;
let contentWidth = content.clientWidth;
this.timer = window.setInterval(function () {
wrapper.scrollLeft++;
if (wrapper.scrollLeft >= contentWidth) {
wrapper.scrollLeft = 0;
}
}, 20)
}
//停止?jié)L動(dòng)
stopQu(){
window.clearInterval(timer);
}
//重新滾動(dòng)
startQu(){
this.marquee();
}
}
}
</script>
這個(gè)坑是在mouted鉤子函數(shù)中不能立即去使用this.$refs膏执，所以使用setTimeout()函數(shù)停頓一秒后執(zhí)行驻售，下面是具體的官方介紹，詳情請(qǐng)自行查看vue官網(wǎng)更米。
image.png
image.png
