[JavaScript知识库]vue实现轮播图

vue实现轮播图

需求

• 进入页面后开启轮播。
• 左右按钮点击无缝衔接。
• 右下角圆点与当前banner图对应展示,点击可控制图片展示。
• 当前图片对应的圆点为黑色背景
• 鼠标进入图片后轮播停止,移除图片后轮播启动。

实现思路

• 需要用到vue的生命周期函数mounted,在界面加载后启动定时轮播。
• 要实现无缝衔接最重要的是做好点击最后一张图片向右和第一张图片向左的判断。currentIndex从0开始，当currentIndex++等于数组的长度时，说明当前在最后一张图片了，那么点击后就使currentIndex=0，回到第一张图片；当currentInde--小于0时，说明当前在第一张图片了，那么点击后就使currentIndex=数组的长度-1，回到最后一张图片。
• 给li标签添加点击事件，传递参数为item.id ,在函数中将值赋给currentIndex,即可实现点击圆点控制图片效果
• 使用vue指令v-bind实现动态类名的添加，用三元表达式进行判断li标签id是否与currentIndex的一致,如果一致添加active类名:class="item.id===currentIndex? 'active': '' "
• 给图片添加mouseover 和mouseleave监听事件，鼠标移入时关闭定时轮播，鼠标移出时开启定时轮播，事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器。

实现效果

html

<div class="showImg" >
    //轮播图片
    <img  @mouseover="changeInterval(true)" 
         @mouseleave="changeInterval(false)"  
         v-for="(item) in imgArr" 
         :key="item.id"
         :src="item.url" 
         alt="暂无图片" 
         v-show="item.id===currentIndex" 
         >
    //左侧按钮
    <div  @click="clickIcon('up')"   class="iconDiv icon-left"> 
        <i class="el-icon-caret-left"></i>
    </div>
    //右侧按钮
    <div  @click="clickIcon('down')"  class="iconDiv icon-right">
        <i class="el-icon-caret-right"></i>
    </div>
    //控制圆点
    <div class="banner-circle">
        <ul>
            <li @click="changeImg(item.id)" 
                v-for="(item) in imgArr" 
                :key="item.id"
                :class="item.id===currentIndex? 'active': '' "
             ></li>
        </ul>
    </div>
</div>

css

* {
	padding: 0;
	margin: 0;
}
/* 清除li前面的圆点 */
li {
	list-style-type: none;
}
.showImg{
	position: relative;
	width: 40%;
	height: 250px;
	margin: 100px auto;
	overflow: hidden;
}
/* 轮播图片 */
.showImg img{
	width: 100%;
	height: 100%;
}

/* 箭头图标 */
.iconDiv{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border: 1px solid #666;
	border-radius: 15px;
	background-color: rgba(125,125,125,.2);
	line-height: 30px;
	text-align: center;
	font-size: 25px;
	cursor: pointer;
}
.iconDiv:hover{
	background-color: white;
}
.icon-left{
	left: 10px;
}
.icon-right{
	right: 10px;
}

/* 控制圆点 */
.banner-circle{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 20px;
}
.banner-circle ul{
	margin: 0 50px;
	height: 100%;
	text-align: right;
}
.banner-circle ul li{
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 5px;
	border-radius: 7px;
	background-color: rgba(125,125,125,.8);
	cursor: pointer;
}
.active{
	background-color: black !important; 
}

JavaScript

		data(){
			return {
				currentIndex :0,//当前所在图片下标
				timer:null,//定时轮询
				imgArr:[
					{	id:0,
						url:"./img/banner01.jpg",
					},{
						id:1,
						url:"./img/banner02.jpg",
					},{
						id:2,
						url:"./img/banner03.jpg",
					},{
						id:3,
						url:"./img/banner04.jpg",
					},
				]
			}
		},
		methods:{
			//开启定时器
			startInterval(){
				// 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
				clearInterval(this.timer);
				this.timer = setInterval(()=>{
					this.currentIndex++;
					if(this.currentIndex > this.imgArr.length-1){
						this.currentIndex = 0
					}
				},3000)
			},
			// 点击左右箭头
			clickIcon(val){
				if(val==='down'){
					this.currentIndex++;
					if(this.currentIndex===this.imgArr.length){
						this.currentIndex = 0;
					}
				}else{
					/* 第一种写法
					this.currentIndex--;
					if(this.currentIndex < 0){
						this.currentIndex = this.imgArr.length-1;
					} */
					// 第二种写法
					if(this.currentIndex === 0){
						this.currentIndex = this.imgArr.length;
					}
					this.currentIndex--;
				}
			},
			// 点击控制圆点
			changeImg(index){
				this.currentIndex = index
			},
			//鼠标移入移出控制
			changeInterval(val){
				if(val){
					clearInterval(this.timer)
				}else{
					this.startInterval()
				}
			}
		},
		//进入页面后启动定时轮询
		mounted(){
			this.startInterval()
		}
	})