Vue实现简单轮播图-优快云博客

本文链接：https://blog.youkuaiyun.com/alberqing_/article/details/80296818

本文介绍了如何使用Vue实现一个基本的轮播图组件，包括点击切换、自动播放等功能。通过HTML、CSS和Vue.js代码展示实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先简单说一下，这个轮播图的功能，有点击功能，包含点击下一张，上一张，和点击首页触发定时器，下面贴一下代码：

HTML部分

<div class="nav">
    <img :src="img" @click="bling()"> <!--显示一张图片，并给图片添加点击事件-->
    <ul>
	<li v-for="(item,index) in arr"></li>
    </ul>
    <button @click="prev()">上一张</button>
    <button @click="next()">下一张</button>
</div>

CSS部分

<style>
    img{
        display:block;
        margin:0 auto;
        width:320px;
        height:130px;
    }
    .nav li{
        list-style: none;
    }
</style>

vue.js部分

<script>
		window.onload = function(){
			var nav = new Vue({
				el:'.nav',
				data:{
					img:'goods_pics/q14.jpg',
					json:[
						"goods_pics/q14.jpg",
						"goods_pics/q50.jpg",
						"goods_pics/q51.jpg",
						"goods_pics/q54.jpg",
						"goods_pics/q75.jpg"
					],
					index:0
				},
				methods:{
					next:function(){
						this.img=this.arr[this.index++];
						if(this.index>4){
							this.index=0; //当超过图片数量，返回第一张图片
						}
					},
					prev:function(){
						this.img = this.arr[this.index--];
						if(this.index<0){
							this.index=4;
						}
						//当index值<0时，返回最后一张图片
					},
					//点击首张图片触发函数功能
					bling:function(){
						let self=this;
						//定时器，每2秒换一张图片
						setInterval(function(){
							self.img=self.arr[self.index++];
							if(self.index>4){
								self.index=0;
							}
						},2000);
					}
					
				},
				
			});
		}
	</script>

vue之简单轮播图