Vue實現(xiàn)首頁banner自動輪播效果

更新時間：2022年03月03日 17:56:43 作者：theMuseCatcher

這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)首頁banner自動輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)首頁banner自動輪播的具體代碼，供大家參考，具體內(nèi)容如下

效果如圖：

①創(chuàng)建Banner.vue組件，需傳入banner數(shù)組，可設(shè)置輪播間隔ms

<template>
? <div class="m-banner-wrap" v-if="bannerData.length">
? ? <div class="m-banner-list">
? ? ? <div
? ? ? ? class="u-banner-item fade"
? ? ? ? v-for="(item, index) in bannerData"
? ? ? ? :key="index"
? ? ? ? v-show="index===activeIndex"
? ? ? ? :style="`background: url(${item.tupian}) no-repeat; background-size: cover;`"
? ? ? ? @mouseover="onOver()" @mouseout="onOut()">
? ? ? ? <a :href="item.link"></a>
? ? ? </div>
? ? </div>
? ? <div class="m-dot-list" v-if="bannerData.length > 1">
? ? ? <div v-for="(item, index) in bannerData" :key="index" :class="['u-dot-item', {active: index===activeIndex}]" @mouseenter="onEnter(index)" @mouseleave="onLeave">
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
export default {
? name: 'Banner',
? props: {
? ? bannerData: { // banner數(shù)組
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return []
? ? ? }
? ? },
? ? interval: { // 切換間隔ms
? ? ? type: Number,
? ? ? default: 3000
? ? }
? },
? data () {
? ? return {
? ? ? activeIndex: 0,
? ? ? timer: null
? ? }
? },
? mounted () {
? ? setTimeout(() => {
? ? ? this.startSlider()
? ? }, 1000)
? },
? methods: {
? ? onOver () {
? ? ? clearInterval(this.timer)
? ? },
? ? onOut () {
? ? ? this.startSlider()
? ? },
? ? onEnter (index) {
? ? ? this.activeIndex = index
? ? ? clearInterval(this.timer)
? ? },
? ? onLeave () {
? ? ? this.startSlider()
? ? },
? ? startSlider () {
? ? ? clearInterval(this.timer)
? ? ? if (this.bannerData.length > 1) {
? ? ? ? this.timer = setInterval(this.onMove, this.interval)
? ? ? }
? ? },
? ? onMove () {
? ? ? if (this.activeIndex === this.bannerData.length - 1) {
? ? ? ? this.activeIndex = 0
? ? ? } else {
? ? ? ? this.activeIndex++
? ? ? }
? ? }
? },
? beforeDestroy () {
? ? clearInterval(this.timer)
? ? this.timer = null
? }
}
</script>
<style lang="less" scoped>
@mainColor: #108ee9;
.m-banner-wrap {
? width: 100%;
? height: 600px;
? min-width: 1200px;
? margin: 0 auto;
? overflow: hidden;
? position: relative;
? .m-banner-list {
? ? height: 600px;
? ? .u-banner-item {
? ? ? min-width: 1200px;
? ? ? height: 600px;
? ? ? width: 100%;
? ? ? a {
? ? ? ? display: block;
? ? ? ? height: 100%;
? ? ? }
? ? }
? ? .fade {
? ? ? animation: fade 0.5s ease-in-out; // 切換banner時的過渡效果
? ? }
? ? @keyframes fade {
? ? ? 0% {opacity:0;}
? ? ? 5% {opacity:0.05;}
? ? ? 10% {opacity:0.1;}
? ? ? 20% {opacity:0.2;}
? ? ? 35% {opacity:0.35;}
? ? ? 50% {opacity:0.5;}
? ? ? 65% {opacity:0.65;}
? ? ? 80% {opacity:0.8;}
? ? ? 90% {opacity:0.9;}
? ? ? 95% {opacity:0.95;}
? ? ? 100%{opacity:1;}
? ? }
? }
? .m-dot-list {
? ? width: 600px;
? ? position: absolute;
? ? bottom: 20px;
? ? left: 50%;
? ? margin-left: -300px;
? ? text-align: center;
? ? .u-dot-item { // 圓點樣式
? ? ? display: inline-block;
? ? ? width: 12px;
? ? ? height: 12px;
? ? ? margin: 0 5px;
? ? ? background: #fff;
? ? ? cursor: pointer;
? ? ? border: 1px solid #fff;
? ? ? border-radius: 50%;
? ? ? opacity: 0.8;
? ? }
? ? .active { // 圓點選中樣式
? ? ? width: 30px;
? ? ? background: @mainColor;
? ? ? border: 1px solid @mainColor;
? ? ? border-radius: 12px;
? ? ? opacity: 1;
? ? }
? }
}
</style>

②在要使用的頁面引入

<Banner :bannerData="bannerData" :interval="3000"/>
import Banner from '@/components/Banner'
components: {
? ? Banner
}
data () {
? ? return {
? ? ? bannerData: [
? ? ? ? {
? ? ? ? ? link: '跳轉(zhuǎn)地址...',
? ? ? ? ? src: '圖片地址...'
? ? ? ? },
? ? ? ? {
? ? ? ? ? link: '跳轉(zhuǎn)地址...',
? ? ? ? ? src: '圖片地址...'
? ? ? ? },
? ? ? ? {
? ? ? ? ? link: '跳轉(zhuǎn)地址...',
? ? ? ? ? src: '圖片地址...'
? ? ? ? }
? ? ? ]
? ? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: