vue-轮播图

最新推荐文章于 2023-09-03 08:30:00 发布

guoxiaxing

最新推荐文章于 2023-09-03 08:30:00 发布

阅读量199

点赞数

分类专栏：前端框架文章标签： vue

本文链接：https://blog.csdn.net/hahahahahahahaha__1/article/details/81463511

版权

本文将介绍如何在 Vue.js 框架中创建一个功能完善的轮播图组件，包括图片切换、自动播放、箭头导航和指示器等功能。通过自定义指令和组件通信实现动态数据绑定，让你轻松打造高性能的轮播效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style>
		#app{
			width: 570px;
			height: 280px;
			position: absolute;
			top:50%;
			left:50%;
			margin-top: -140px;
			margin-left: -285px;
			border:1px solid black;
			background-color:green;
			overflow: hidden;
		}
		.bottom{
			height: 13px;
			border-radius: 6.5px;
			position: absolute;
			bottom:10px;
			background-color: rgba(255,255,255,0.3);
			left:50%;
			transform: translateX(-50%);
			padding: 0;
			list-style: none;
		}
		.bottom .img{
			width: 8px;
			height: 8px;
			margin:2.5px 3px;
			float: left;
			border-radius: 4px;
			background-color: white;
			cursor: pointer;
		}
		.bottom .active{
			background-color: orange;
		}
		.pic{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top:0;
			background-size:100%;
			background-repeat: no-repeat;
		}