技術標籤：Vuevue

目錄

封裝元件

使用範例

封裝元件

s-carousel.vue

<template>
    <div :style="style" class="carouselBox"
         @mouseenter.stop="handleMouseEnter"
         @mouseleave.stop="handleMouseLeave"
    >
        <!--圖片陣列-->
        <div v-for="(item,index) in list" :key="index">
            <transition name="slide-right">
                <div @click="goto(item.url)" v-show="index === activeIndex" class="carouselContent">
                    <img :height="height" :src="item.imgPath">
                </div>
            </transition>
        </div>
        <!--指示器-->
        <div class="carousel__indicatorsBox"
             v-if="!hideIndicator"
        >
            <div v-for="(item, index) in list" :key="index"
                 :class="['carousel__indicator',{ 'activeIndicator': index === activeIndex }]"
                 @mouseenter="indicatorHover(index)"
                 @click.stop="indicatorClick(index)">
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            // 是否隱藏指示器
            hideIndicator: Boolean,
            // 輪播圖切換時間間隔，單位毫秒ms
            interval: {
                type: Number,
                default: 3000
            },
            // 是否迴圈播放
            loop: {
                type: Boolean,
                default: true
            },
            // 是否自動播放
            autoplay: {
                type: Boolean,
                default: true
            },
            // 輪播圖高度，不能小於10px
            height: {
                type: String,
                default: '100px'
            },
            // 輪播圖寬度——根據高度，參考圖片比例，指定合適的寬度
            width: {
                type: String,
                default: '680px'
            },
            // 圖片資料——物件陣列 imgPath屬性為圖片路徑，url屬性為點選跳轉的連結
            list: Array
        },
        data() {
            return {
                activeIndex: 0,
                style: {
                    'height': this.height,
                    'width': this.width
                },
                timer: null,
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.startTimer();
            });
        },
        methods: {
            // 滑鼠移入輪播圖——暫停輪播
            handleMouseEnter() {
                this.pauseTimer();
            },
            // 滑鼠移出輪播圖——重啟輪播
            handleMouseLeave() {
                this.startTimer();
            },
            // 啟動輪播
            startTimer() {
                if (this.interval <= 0 || !this.autoplay || this.timer) return;
                this.timer = setInterval(this.playSlides, this.interval);
            },
            // 暫停輪播
            pauseTimer() {
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
            },
            // 切換展示的圖片
            playSlides() {
                if (this.activeIndex < this.list.length - 1) {
                    this.activeIndex++;
                } else if (this.loop) {
                    this.activeIndex = 0;
                }
            },
            // 滑鼠懸浮於指示器上時，切換到相應的圖片
            indicatorHover(index) {
                this.activeIndex = index;
            },
            // 點選指示器時，切換到相應的圖片
            indicatorClick(index) {
                this.activeIndex = index;
            },
            // 點選圖片時，跳轉到指定連結
            goto(url) {
                window.open(url)
            }
        }
    }
</script>
<style scoped>
    /*輪播圖盒子樣式 -- 相對定位，超出部分隱藏,自動水平居中*/
    .carouselBox {
        /*無圖片時的預設底色*/
        background: white;
        position: relative;
        overflow: hidden;
        margin: 0px auto
    }

    /*子絕父相定位——使指示器定位在輪播圖下邊緣*/
    .carousel__indicatorsBox {
        position: absolute;
        display: flex;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    /*指示器樣式*/
    .carousel__indicator {
        margin: 0px 6px;
        opacity: .48;
        width: 30px;
        height: 4px;
        background-color: #FFF;
        border: none;
        outline: 0;
        cursor: pointer;
        -webkit-transition: .3s;
        transition: .3s;
    }

    /*滑鼠懸浮於指示器上時，透明度變為1*/
    .activeIndicator {
        opacity: 1;
    }

    /*子絕父相定位——使圖片層疊在輪播圖中心*/
    .carouselContent {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /*輪播圖切換時的過渡動畫 -- 從左滑動進入，從右滑動移出*/
    .slide-right-enter-active,
    .slide-right-leave-active {
        will-change: transform;
        transition: all 500ms;
        position: absolute;
    }

    .slide-right-enter {
        opacity: 0;
        transform: translateX(-100%);
    }

    .slide-right-leave-active {
        opacity: 0;
        transform: translateX(100%);
    }
</style>
 

使用範例

本範例為全域性註冊了s-carousel，若未全域性註冊，記得用 import 引入該元件

<template>
    <s-carousel height="300px" :list="list"></s-carousel>
</template>
<script>
    export default {
        data() {
            return {
                list: [
                    {
                        imgPath: 'https://aecpm.alicdn.com/simba/img/TB1_JXrLVXXXXbZXVXXSutbFXXX.jpg',
                        url: 'https://aecpm.alicdn.com/simba/img/TB1_JXrLVXXXXbZXVXXSutbFXXX.jpg',
                    },
                    {
                        imgPath: 'https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg',
                        url: 'https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg',
                    },
                    {
                        imgPath: 'http://img.alicdn.com/imgextra/i3/173/O1CN01aT1rIi1D9HA4VDqO5_!!173-0-luban.jpg_q100.jpg',
                        url: 'http://img.alicdn.com/imgextra/i3/173/O1CN01aT1rIi1D9HA4VDqO5_!!173-0-luban.jpg_q100.jpg',
                    },
                    {
                        imgPath: 'https://img.alicdn.com/imgextra/i4/119/O1CN01Kd7pMV1CkXlwcK4oQ_!!119-0-luban.jpg_q100.jpg',
                        url: 'https://img.alicdn.com/imgextra/i4/119/O1CN01Kd7pMV1CkXlwcK4oQ_!!119-0-luban.jpg_q100.jpg',
                    },
                ],
            }
        },
    }
</script>