Vue 轮播图

简介: Vue 轮播图

封装组件

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>
 
目录
相关文章
|
6天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
6天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
6天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
12天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
12天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
12天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
12天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
11天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
13天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
11天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
下一篇
无影云桌面