建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Vue如何實(shí)現(xiàn)圖片輪播組件
小編這次要給大家分享的是Vue如何實(shí)現(xiàn)圖片輪播組件，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、綠園網(wǎng)站維護(hù)、網(wǎng)站推廣。
1、先看效果：
熟悉的圖片輪播，只要是個(gè)網(wǎng)站，百分之90以上會(huì)有個(gè)圖片輪播。我認(rèn)為使用圖片輪播。
第一可以給人以一種美觀的感受，而不會(huì)顯得網(wǎng)站那么呆板，
第二可以增加顯示內(nèi)容，同樣的區(qū)域可以顯示更多內(nèi)容。
2、每學(xué)一個(gè)新東西 ，圖片輪播都是很好的練手案例，而且，也很實(shí)用。
3、基本要求：頁面加載，自動(dòng)播放。鼠標(biāo)懸停，停止播放。鼠標(biāo)離開，繼續(xù)播放
點(diǎn)擊左右箭頭切換上一張，下一張圖片。
下方小圓點(diǎn)顯示當(dāng)前位第幾張圖片。
4、使用Vue實(shí)現(xiàn)
5、示例代碼
結(jié)構(gòu)html：
CSS部分：
*{
box-sizing: border-box;
margin:0;
padding:0;
}
ol,ul{
list-style: none;
}
#slider{
text-align: center;
}
.window{
position:relative;
width:600px;
height:400px;
margin:0 auto;
overflow:hidden;
}
.container{
display:flex;
position:absolute;
}
.left, .right{
position:absolute;
top:50%;
transform:translateY(-50%);
width:50px;
height:50px;
background-color:rgba(0,0,0,.3);
border-radius:50%;
cursor:pointer;
}
.left{
left:3%;
padding-left:12px;
padding-top:10px;
}
.right{
right:3%;
padding-right:12px;
padding-top:10px;
}
img{
user-select: none;
}
.dots{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
}
.dots li{
display:inline-block;
width:15px;
height:15px;
margin:0 3px;
border:1px solid white;
border-radius:50%;
background-color:#333;
cursor:pointer;
}
.dots .dotted{
background-color:orange;
}JavaScript部分：
script>
export default {
name: 'slider',
props: {
initialSpeed: {
type: Number,
default: 30
},
initialInterval: {
type: Number,
default: 3
}
},
data () {
return {
sliders:[
{
img:'http://img.hb.aicdn.com/adbde61e4343dedd21e97ea7f22666825a8db7d077ffe-qn8Pjn_fw658'
},
{
img:'http://img.hb.aicdn.com/adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwRqgn_fw658'
},
{
img:'http://img.hb.aicdn.com/ab7f48509b3c0353017d9a85ef1d12400c9b2724540d4-p3zouo_fw658'
},
{
img:'http://img.hb.aicdn.com/60f788fc2a846192f224b9e6d4904b30e54926211d3d67-ACFJ9G_fw658'
},
{
img:'http://img.hb.aicdn.com/22ded455284aab361b8d2056e82f74a891a019704296a-PSraEB_fw658'
},
],
imgWidth:600,
currentIndex:1,
distance:-600,
transitionEnd: true,
speed: this.initialSpeed
}
},
computed:{
containerStyle() {
return {
transform:`translate3d(${this.distance}px, 0, 0)`
}
},
interval() {
return this.initialInterval * 1000
}
},
mounted() {
this.init()
},
methods:{
init() {
this.play()
window.onblur = function() { this.stop() }.bind(this)
window.onfocus = function() { this.play() }.bind(this)
},
move(offset, direction, speed) {
console.log(speed)
if (!this.transitionEnd) return
this.transitionEnd = false
direction === -1 ? this.currentIndex += offset/600 : this.currentIndex -= offset/600
if (this.currentIndex > 5) this.currentIndex = 1
if (this.currentIndex < 1) this.currentIndex = 5
const destination = this.distance + offset * direction
this.animate(destination, direction, speed)
},
animate(des, direc, speed) {
if (this.temp) {
window.clearInterval(this.temp);
this.temp = null ;
}
this.temp = window.setInterval(() => {
if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
this.distance += speed * direc
} else {
this.transitionEnd = true
window.clearInterval(this.temp)
this.distance = des
if (des < -3000) this.distance = -600
if (des > -600) this.distance = -3000
}
}, 20)
},
jump(index) {
const direction = index - this.currentIndex >= 0 ? -1 : 1;
const offset = Math.abs(index - this.currentIndex) * 600;
const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed ;
this.move(offset, direction, jumpSpeed)
},
play() {
if (this.timer) {
window.clearInterval(this.timer)
this.timer = null
}
this.timer = window.setInterval(() => {
this.move(600, -1, this.speed)
}, this.interval)
},
stop() {
window.clearInterval(this.timer)
this.timer = null
}
}
}
看完這篇關(guān)于Vue如何實(shí)現(xiàn)圖片輪播組件的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。
新聞標(biāo)題：Vue如何實(shí)現(xiàn)圖片輪播組件
鏈接分享：http://www.ef60e0e.cn/article/pgppdp.html
