Day9

最新推荐文章于 2024-05-17 00:13:31 发布

屁小屁小屁

最新推荐文章于 2024-05-17 00:13:31 发布

阅读量115

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/pjxaaaaa/article/details/113662084

版权

幻灯片：

自动也可以手动切换图片

效果图：

在页脚部分可以点击数字就看第几张图，这是手动，也可以自动，鼠标离开图片之后，时间可以自己设置过几秒再切换图片。
在这里插入图片描述

一些重点代码段：

页脚部分👇–用v-for将图片顺序遍历，在鼠标点击事件中，调用goto，来控制前一张图片和后一张图片。并在computed属性中实现。

<ul class="slide-pages">
		<li @click="goto(prevpage)">&lt;</li>
		<li v-for="(item,index) in slides " @click="goto(index)">
			<a :class="{on:index===nowIndex}"> {{index+1}}</a>
		</li>
		<li @click="goto(nextpage)">&gt;</li>
</ul>

computed属性代码片👇

①、如果此时的页码在最后一页，就return 0，意思是回到第一页，也就是当在最后一页再点击下一页的时候就回到第一页，如果此时不在最后一页呢么点击下一页的时候只需要return this.nowIndex + 1
②、同理当此时在第一页再点击前一页时也这样处理。

computed: {
	// 下一页
	nextpage() {
	//如果到第四页，再点下一页，就会报错，所以要判断一下
	if (this.nowIndex === this.slides.length - 1) {
		return 0
	} else {
		return this.nowIndex + 1
	}
},
	// 前一页
	prevpage() {
	if (this.nowIndex === 0) {
		return this.slides.length - 1
	} else {
		return this.nowIndex - 1
	}

}
	},

图片部分👇，这里有个鼠标悬停事件，当鼠标在图片上时，图片不自动跳转，当鼠标不在图片上时，图片自动跳转。图片都在下面的数据当中，等会将整体代码发出来。

<!-- 鼠标悬停,鼠标在的时候停住 -->
<div id="app" class="slide-show" @mouseover="clerInv()" @mouseout="runInv()">
	<div class="slide-img">
			<a>
				<!-- 图片不能写死要绑定 -->
				<img :src="slides[nowIndex].src">
			</a>
	</div>
	<h2>{{slides[nowIndex].title}}</h2>

方法methods👇

methods: {
		// 点的几就显示第几张图片
		goto(index) {
			this.nowIndex = index
		},
		// 定时器自动跳转
		runInv() {
			// 箭头函数
			this.invId = setInterval(() => {					this.goto(this.nextpage)
				}, 2000)
		},
					
		//停 
		clerInv() {	
			clearInterval(this.invId)
		},
		// 生命周期函数,页面一挂在就调用自动跳转
		mounted() {
			this.runInv()
		},

},

整体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>幻灯片</title>
		<style type="text/css">
			body,
			ul,
			h2 {
				padding: 0;
				margin: 0;
			}

			.slide-show {
				position: relative;
				margin: 15px 15px 15px 0;
				width: 900px;
				height: 500px;
				overflow: hidden;
			}

			.slide-show h2 {
				position: absolute;
				width: 100%;
				height: 100%;
				color: #fff;
				background: #000;
				opacity: .5;
				bottom: 0px;
				height: 30px;
				text-align: left;
				padding-left: 15px;
			}

			.slide-img {
				width: 100%;
			}

			.slide-img img {
				width: 100%;
				position: absolute;
				top: 0;
			}

			.slide-pages {
				position: absolute;
				bottom: 10px;
				right: 15px;
			}

			.slide-pages li {
				display: inline-block;
				padding: 0 10px;
				cursor: pointer;
				color: #fff;
			}

			.slide-pages li .on {
				/* 出来个下划线 */
				text-decoration: underline;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<!-- 鼠标悬停,鼠标在的时候停住 -->
		<div id="app" class="slide-show" @mouseover="clerInv()" @mouseout="runInv()">
			<div class="slide-img">
				<a>
					<!-- 图片不能写死要绑定 -->
					<img :src="slides[nowIndex].src">
				</a>
			</div>
			<h2>{{slides[nowIndex].title}}</h2>
			
			<!-- 页脚 -->
			<ul class="slide-pages">
				<li @click="goto(prevpage)">&lt;</li>
				<li v-for="(item,index) in slides " @click="goto(index)">
					<a :class="{on:index===nowIndex}"> {{index+1}}</a>
				</li>
				<li @click="goto(nextpage)">&gt;</li>
			</ul>
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


		<script type="text/javascript">
			//1、创建vue实例
			var vm = new Vue({
				el: '#app',
				data: {
					slides: [{
							src: '../img/pic1.jpg',
							title: '最新书本',
							href: 'detail/analysis'
						},
						{
							src: '../img/pic2.jpg',
							title: '最热书本',
							href: 'detail/count'
						},
						{
							src: '../img/pic3.jpg',
							title: '儿童乐园',
							href: 'http://xxx.xxx.com'
						},
						{
							src: '../img/pic4.jpg',
							title: '下期更新',
							href: 'detail/forecast'
						}
					],
					// 第一张图片
					nowIndex: 0,
				},
				computed: {
					// 下一页
					nextpage() {
						//如果到第四页，再点下一页，就会报错，所以要判断一下
						if (this.nowIndex === this.slides.length - 1) {
							return 0

						} else {
							return this.nowIndex + 1
						}

					},
					// 前一页
					prevpage() {
						if (this.nowIndex === 0) {
							return this.slides.length - 1

						} else {
							return this.nowIndex - 1
						}

					}
				},
				methods: {
					// 点的几就显示第几张图片
					goto(index) {
						this.nowIndex = index
					},
					// 定时器自动跳转
					runInv() {
						// 箭头函数
						this.invId = setInterval(() => {
							this.goto(this.nextpage)
						}, 2000)
					},
					
					//停 
					clerInv() {
						clearInterval(this.invId)
					},
					// 生命周期函数,页面一挂在就调用自动跳转
					mounted() {
						this.runInv()
					},

				},
			});
		</script>
	</body>
</html>

屁小屁小屁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day9

幻灯片：自动也可以手动切换图片效果图：在页脚部分可以点击数字就看第几张图，这是手动，也可以自动，鼠标离开图片之后，时间可以自己设置过几秒再切换图片。一些重点代码段：页脚部分????–用v-for将图片顺序遍历，在鼠标点击事件中，调用goto，来控制前一张图片和后一张图片。并在computed属性中实现。<ul class="slide-pages"> <li @click="goto(prevpage)">&lt;</li> <l
复制链接

扫一扫