超简单的基于vue的轮播图实现

今天要做一个轮播图,网上找了一圈都不满意,自己写了个.

效果如下:

图片可自行配置,始终显示6(改v-for后的列表可以控制数量)张;

核心代码:

<ul v-on:mouseout="move()" v-on:mouseover="stopmove()">
        <i @click="left()" class="el-icon-arrow-left"></i>
        <li :key="index" v-for="index in [0,1,2,3,4,5]">
            <img :src="changeImage(index)" @click="goToOneMap(index)" alt=""/>
        </li>
        <i @click="right()" class="el-icon-arrow-right"></i>
 </ul>
 //点击按钮左移
left() {
	this.currentImageIndex--;
	if (this.currentImageIndex < 0) {
		this.currentImageIndex = this.pictures.length - 1
        }
    },
//点击按钮右移
right() {
    	this.currentImageIndex++;
    	if (this.currentImageIndex > this.pictures.length - 1) {
    		this.currentImageIndex = 0
   		}
    },

原理蛮简单的,根据vue的特性通过方法返回图片地址,用一个变量记录移动的下标位数,一轮就重置.
完整组件代码,可自动切换,手动切换,带参数转跳:

<template>
    <ul v-on:mouseout="move()" v-on:mouseover="stopmove()">
        <i @click="left()" class="el-icon-arrow-left"></i>
        <li :key="index" v-for="index in [0,1,2,3,4,5]">
            <img :src="changeImage(index)" @click="goToOneMap(index)" alt=""/>
        </li>
        <i @click="right()" class="el-icon-arrow-right"></i>
    </ul>
</template>

<script>
    export default {
        name: "Slideshow",
        data() {
            return {
            	//这里配置图片,变量我定义在了其他位置.格式如下
            	//var slidePictures = [
				//     {
				//         documentName: '云南瓦片数据',
				//         img: '../../static/images/home1.jpg',
				//     },
				//     {
				//         documentName: '',
				//         img: '../../static/images/home2.png',
				//     }]
                pictures: slidePictures,
                currentImageIndex: 0
            }
        },
        created() {
            this.move()
        },
        methods: {
            changeImage(index) {
                if (index - this.currentImageIndex >= 0) {
                    return this.pictures[index - this.currentImageIndex].img
                } else {
                    return this.pictures[index - this.currentImageIndex + this.pictures.length].img
                }
            },
            //移动
            move() {
                this.timer = setInterval(this.starmove, 2500)
            },
            //开始移动
            starmove() {
                this.currentImageIndex--;
                if (this.currentImageIndex < 0) {
                    this.currentImageIndex = this.pictures.length - 1
                }
            },
            //鼠标悬停时停止移动
            stopmove() {
                clearInterval(this.timer)
            },
            //点击按钮左移
            left() {
                this.currentImageIndex--;
                if (this.currentImageIndex < 0) {
                    this.currentImageIndex = this.pictures.length - 1
                }
            },
            //点击按钮右移
            right() {
                this.currentImageIndex++;
                if (this.currentImageIndex > this.pictures.length - 1) {
                    this.currentImageIndex = 0
                }
            },
            goToOneMap(index) {
                var documentName = "";
                if (index - this.currentImageIndex >= 0) {
                    documentName = this.pictures[index - this.currentImageIndex].documentName

                } else {
                    documentName = this.pictures[index - this.currentImageIndex + this.pictures.length].documentName

                }
                this.$router.push({
                    path: "index",
                    query: {
                        documentName: documentName
                    }
                })
            }
        },
    }
</script>

<style scoped>
    ul {
        display: flex;
        flex-direction: row;
    }

    ul li {
        list-style: none;
        width: 15%;
        margin: 0 auto;
        height: 200px;
        padding: 10px;
    }

    ul li img {
        width: 100%;
        height: 100%;
    }

    i {
        color: white;
        vertical-align: bottom;
        margin-top: 88px;
        font-size: 24px;
        cursor: pointer;
    }

</style>