实现功能

  • 鼠标移至图片，停止轮播图播放
  • 鼠标移至图片外，播放轮播图
  • 鼠标点击轮播图下方数字，切换到对应图片

实现思路

  • 在data属性中定义了一些数据，包括轮播图片信息，当前图片索引、定时器、标志位，在“created”生命周期钩子函数中，调用“play()”方法来启动轮播图自动播放
  • 在method中定义三个方法：‘change’、‘play’、‘stop’、‘go’
  • change

用于切换图片，它接受一个参数‘index’表示要切换到图片的索引，然后将当前显示图片的索引‘currentIndex’设置为‘index’

  • play

用于开始播放轮播图片，先使用‘setInterval()’函数创建一个定时器，每隔3s调用一次匿名函数，在匿名函数中，判断是否停止播放，如果没有，则当前显示的图片的索引‘currentIndex’加1，如果当前索引大于slideList的长度，则当前索引回到初始0，这样就实现了自动播放

  • stop

用于停止播放轮播图，调用clearInterval()来清除定时

  • go

用于轮播图播放，调用上方设置好的play()方法

  • HTML代码中，使用Vue中的过渡组件‘transition-group’来实现图片的淡入淡出的效果
  • 配合css来设置过渡效果

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用Vue3实现轮播图效果</title>
		<link rel="stylesheet" href="./css/test.css">
	</head>
	<body>
		<div id="box">
			<div class="banner">
		  		<!--切换图片-->
		  		<div class="bannerImg">
		    		<transition-group name="fade" tag="ul" class="slideUl">
						<li v-for="(list, index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
							<a :herf="list.clickURL">
								<img :src="list.image" :alt="list.desc">
							</a>
						</li>
		    		</transition-group>
		  		</div>
		  		<!--切换小按钮-->
		  		<div class="bannerItems">
		  		    <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)">{{index+1}}</span>
		  		</div>
			</div>
		</div>
		<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.js"></script>
		<script src="./js/test.js"></script>
	</body>
</html>

CSS

*{
	margin: 0;
	padding: 0;
}
ul li{
	list-style: none;
}
a{
	text-decoration: none;
}
.banner {
	width: 1080px;
	height: 720px;
	margin: 20px auto;
	position: relative;
}
.bannerImg img{
	width: 1080px;
	height: 720px;
	position: absolute;
	z-index: 800;
}
.bannerItems{
	position: absolute;
	z-index: 1000;
	bottom: 0;
	width: 100%;
	padding: 10px 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.bannerItems span{
	width: 30px;
	height: 30px;
	background:  rgba(100, 100, 100, .6);
	margin: 0 5px;
	border-radius: 50%;
	font-size: 16px;
	font-weight: bold;
	font-family: Microsoft YaHei;
	line-height: 30px;
	text-align: center;
	color: white;
	cursor: pointer;
}
.bannerItems span.active{
	background-color: red;
}

JS

const App = {
	data(){
		return {
			slideList:[
				{
					image:"https://picsum.photos/800/300?random=1",
					desc:"第一张照片",
					clickURL:"https://picsum.photos/800/300?random=1"
				},
				{
					image:"https://picsum.photos/800/300?random=2",
					desc:"第二张照片",
					clickURL:"https://picsum.photos/800/300?random=2"
				},
				{
					image:"https://picsum.photos/800/300?random=3",
					desc:"第三张照片",
					clickURL:"https://picsum.photos/800/300?random=3"
				},
				{
					image:"https://picsum.photos/800/300?random=4",
					desc:"第四张照片",
					clickURL:"https://picsum.photos/800/300?random=4"
				},
				{
					image:"https://picsum.photos/800/300?random=5",
					desc:"第五张照片",
					clickURL:"https://picsum.photos/800/300?random=5"
				},
				{
					image:"https://picsum.photos/800/300?random=6",
					desc:"第六张照片",
					clickURL:"https://picsum.photos/800/300?random=6"
				}
			],
			currentIndex: 0, // 当前显示的图片的索引
			timer: null // 自动切换的定时器
		}
	},
	methods: {
		play() {
			this.timer = setInterval(() => {
			this.currentIndex++;
			if (this.currentIndex >= this.slideList.length) {
			this.currentIndex = 0;
			}
			}, 3000);
			},
		stop(){
			clearInterval(this.timer);
		},
		go(){
			this.play();
		},
		change(index){
			this.currentIndex = index;
		},
		mounted() {
			// 页面加载完成后，开始自动播放
			this.go()
		  }
	},
};
Vue.createApp(App).mount('#box');

运行效果图

在这里插入图片描述

# vue.js # javascript # 前端
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区