轮播图设计

最新推荐文章于 2023-10-15 13:10:19 发布

XinXun

最新推荐文章于 2023-10-15 13:10:19 发布

阅读量412

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zpxinxun/article/details/122634243

版权

Vue 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue实现轮播图</title>
		<style type="text/css">
			body{
				margin: 100px auto;
				background-color: #F7F7F7;
			}
			#app{
				position: relative;
			}
			#app,#picture{
				margin: 0 auto;
				width: 52.5rem;
				height: 13.75rem;
			}
			#left,#right{
				width: 30px;
				height: 50px;
				background-color: #A9A9A9;
				/* 透明度 */
				/* opacity: 0.8; */
				position: absolute;
				top: 80px;
			}
			#left{
				left: 0;
			}
			#right{
				right: 0;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<img :src="pic" id="picture">
			<img :src="left" id="left" v-show="showLeft" @click="pre">
			<img :src="right" id="right" v-show="showRight" @click="next">
		</div>
		<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:'#app',
				data:{
					pic:'images/1.jpeg',
					left:'images/left.png',
					right:'images/right.png',
					showLeft:false,
					showRight:true,
					startIdx:1,
					stopIdx:4,
					curIdx:1
				},
				methods:{
					pre(){
						console.log('left is click')
						if(this.curIdx>this.startIdx){
							this.curIdx--
						}
						this.showLeft=this.curIdx!==this.startIdx
						this.showRight=true
						this.pic='images/'+this.curIdx+'.jpeg'
					},
					next(){
						if(this.curIdx<this.stopIdx){
							this.curIdx++
						}
						this.showLeft=true
						this.showRight=this.curIdx!== this.stopIdx
						this.pic='images/'+this.curIdx+'.jpeg'
					}
				}
			})
		</script>
	</body>
</html>

XinXun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图设计

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue实现轮播图</title> <style type="text/css"> body{ margin: 100px auto; background-color: #F7F7F7; } #app{ position: relative; .
复制链接

扫一扫