Front-end——VUE实现轮播图

最新推荐文章于 2023-05-29 22:28:25 发布

Star星屹程序设计

最新推荐文章于 2023-05-29 22:28:25 发布

阅读量383

点赞数

分类专栏： HTML+CSS+JS+jQuery+Vue+XML

本文链接：https://blog.csdn.net/weixin_42067873/article/details/112686194

版权

HTML+CSS+JS+jQuery+Vue+XML 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

使用到

VUE中的 v-for快速遍历数据
位置的相对计算，calc()函数，注意使用此函数时，运算符的两端必须加空格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#app{
				height: 500px;
				width: 750px;
				position: absolute;
				border: 2px solid #000000;
				top: calc((100vh - 500px) / 2);
				left: calc((100vw - 750px) / 2);
			}
			#app>div{
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
			#app>.show{
				opacity: 1;
			}
			#app>ul{
				position: absolute;
				right: 10px;
				bottom: 10px;
			}
			#app>ul>li{
				width: 20px;
				height: 20px;
				float: left;
				margin: 0px 5px;
				list-style: none;
				border-radius: 10px;
				border: 2px solid #FFFFFF;
				background: #7F7F7F;
			}
			
			#app>ul>li:hover{
				background: #FFFFFF;
				border-color: #7F7F7F;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<div 
				v-for="(item,index) in images" 
				:style="{background: 'url(' + item +')'}" 
				:class="{show: index===selectedIndex}"
			></div>
			<ul>
				<li v-for="(item,index) in images" @click="changeimg(index)"></li>
			</ul>
		</div>
		
		<script>
			new Vue({
				el:'#app',
				data(){
					return {
						images: [
							'img/111.jpg',
							'img/222.jpg',
							'img/333.jpg',
							'img/444.jpg',
							'img/555.jpg',
							'img/666.jpg'
						],
						selectedIndex : 0
					}
				},
				methods:{
					changeimg(index){
						this.selectedIndex = index
					}
				}
			})
		</script>
		
	</body>
</html>

Star星屹程序设计

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Front-end——VUE实现轮播图

使用到VUE中的 v-for快速遍历数据位置的相对计算，calc()函数，注意使用此函数时，运算符的两端必须加空格<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.min.js"></script> <style> *{ ma.
复制链接

扫一扫