vue實(shí)現(xiàn)自動(dòng)滑動(dòng)輪播圖片

更新時(shí)間：2022年03月03日 08:06:49 作者：theMuseCatcher

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自動(dòng)滑動(dòng)輪播圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)自動(dòng)滑動(dòng)輪播圖片的具體代碼，供大家參考，具體內(nèi)容如下

效果如圖：(懸浮時(shí)暫停，移出后自動(dòng)輪播)

①創(chuàng)建圖片滑動(dòng)輪播組件ImageSlider.vue，可設(shè)置輪播間隔interval，當(dāng)頁(yè)面沒被激活（用戶沒在瀏覽當(dāng)前頁(yè)面）時(shí)，自動(dòng)暫停，重新瀏覽當(dāng)前頁(yè)面（被激活）時(shí)，自動(dòng)輪播

<template>
? <div class="m-slider" @mouseenter="onStop" @mouseleave="onStart">
? ? <div class="m-panel" ref="slider" :style="`width: ${width}px;`">
? ? ? <div
? ? ? ? v-for="(item, index) in imageData"
? ? ? ? :key="index"
? ? ? ? class="m-image">
? ? ? ? <img :src="item.src" :alt="item.title"/>
? ? ? ? <p class="u-img-title" :title="item.title">{{ item.title }}</p>
? ? ? </div>
? ? ? <div class="m-image">
? ? ? ? <img :src="imageData[0].src" :alt="imageData[0].title"/>
? ? ? ? <p class="u-img-title" :title="imageData[0].title">{{ imageData[0].title }}</p>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
export default {
? name: 'ImageSlider',
? props: {
? ? imageData: { // 圖片數(shù)組
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return []
? ? ? }
? ? },
? ? interval: { // 滑動(dòng)輪播間隔
? ? ? type: Number,
? ? ? default: 3000
? ? }
? },
? data () {
? ? return {
? ? ? visibilityChangeEvent: '',
? ? ? timer: null,
? ? ? imgWidth: 400, // 圖片寬度，用于生成容器寬度
? ? ? activeIndex: 0 // 當(dāng)前展示的圖片
? ? }
? },
? computed: {
? ? width () {
? ? ? return (this.imageData.length + 1) * this.imgWidth
? ? }
? },
? created () {
? ? var hiddenProperty = 'hidden' in document ? 'hidden'
? ? ? : 'webkitHidden' in document ? 'webkitHidden'
? ? ? ? : 'mozHidden' in document ? 'mozHidden'
? ? ? ? ? : null
? ? this.visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange')
? ? var onVisibilityChange = () => {
? ? ? if (!document[hiddenProperty]) {
? ? ? ? this.onStart()
? ? ? ? console.log('頁(yè)面激活')
? ? ? } else {
? ? ? ? this.onStop()
? ? ? ? console.log('頁(yè)面非激活')
? ? ? }
? ? }
? ? document.addEventListener(this.visibilityChangeEvent, onVisibilityChange)
? ? setTimeout(() => {
? ? ? this.timer = setInterval(() => { // 自動(dòng)切換
? ? ? ? this.onMove()
? ? ? }, this.interval)
? ? }, this.interval)
? },
? methods: {
? ? // 滑動(dòng)動(dòng)畫效果
? ? slideEffect (target) {
? ? ? const offsetLeft = this.$refs.slider.offsetLeft // 求出元素的當(dāng)前偏移位置
? ? ? let step = (target - offsetLeft) / 10 // 由快到慢的過渡效果
? ? ? step = step > 0 ? Math.ceil(step) : Math.floor(step) // 對(duì)每次移動(dòng)的距離取整，ceil：向上取整，floor：向下取整
? ? ? setTimeout(() => {
? ? ? ? if (target !== offsetLeft) {
? ? ? ? ? this.$refs.slider.style.left = offsetLeft + step + 'px' // 移動(dòng)
? ? ? ? ? this.slideEffect(target)
? ? ? ? }
? ? ? }, 15) // 每隔15ms執(zhí)行一次
? ? },
? ? onSlider (moveX) {
? ? ? const offset = this.$refs.slider.offsetLeft
? ? ? const target = offset + moveX // 要移動(dòng)的目標(biāo)位置
? ? ? this.slideEffect(target)
? ? },
? ? onMove () {
? ? ? if (this.activeIndex === this.imageData.length - 1) { // 最后一張
? ? ? ? this.activeIndex = 0 // 顯示第一張
? ? ? ? this.$refs.slider.style.left = 0
? ? ? ? this.onSlider(-this.imgWidth)
? ? ? } else {
? ? ? ? this.activeIndex++ // 顯示下一張
? ? ? ? this.onSlider(-this.imgWidth)
? ? ? }
? ? },
? ? onStop () {
? ? ? clearInterval(this.timer)
? ? ? this.timer = null
? ? },
? ? onStart () {
? ? ? clearInterval(this.timer)
? ? ? this.timer = setInterval(() => {
? ? ? ? this.onMove()
? ? ? }, this.interval)
? ? },
? ? beforeDestroy () {
? ? ? document.removeEventListener(this.visibilityChangeEvent)
? ? ? clearInterval(this.timer)
? ? ? this.timer = null
? ? }
? }
}
</script>
<style lang="less" scoped>
@themeColor: #D93844;
.m-slider {
? margin: 100px auto;
? width: 400px;
? height: 300px;
? overflow: hidden;
? position: relative;
? .m-panel {
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? // width: 1600px; // (圖片數(shù)組長(zhǎng)度+1) * 圖片寬度
? ? height: 300px;
? ? .m-image {
? ? ? float: left;
? ? ? width: 400px;
? ? ? height: 300px;
? ? ? img {
? ? ? ? width: 400px;
? ? ? ? height: 270px;
? ? ? ? cursor: pointer;
? ? ? }
? ? ? .u-img-title {
? ? ? ? width: 400px;
? ? ? ? font-size: 16px;
? ? ? ? color: #333;
? ? ? ? line-height: 30px;
? ? ? ? overflow: hidden;
? ? ? ? text-align: left;
? ? ? ? cursor: pointer;
? ? ? ? text-overflow: ellipsis;
? ? ? ? display: -webkit-box;
? ? ? ? -webkit-box-orient: vertical;
? ? ? ? -webkit-line-clamp: 1;
? ? ? ? &:hover {
? ? ? ? ? font-size: 16px;
? ? ? ? ? color: @themeColor;
? ? ? ? }
? ? ? }
? ? }
? }
}
</style>

②在要使用滑動(dòng)輪播圖片的頁(yè)面引入使用組件，并傳入圖片數(shù)組

<ImageSlider :imageData="imageData" :interval="3000" />
import ImageSlider from '@/components/ImageSlider'
components: {
? ? ImageSlider
}
data () {
? ? return {
? ? ? imageData: [
? ? ? ? {
? ? ? ? ? title: 'image-1,image-1,image-1,image-1,image-1...',
? ? ? ? ? src: '圖片地址'
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: 'image-2,image-2,image-2,image-2,image-2...',
? ? ? ? ? src: '圖片地址'
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: 'image-3,image-3,image-3,image-3,image-3...',
? ? ? ? ? src: '圖片地址'
? ? ? ? }
? ? ? ]
? ?}
}

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

您可能感興趣的文章: