2020-09-11

最新推荐文章于 2024-11-12 23:16:45 发布

weixin_50753646

最新推荐文章于 2024-11-12 23:16:45 发布

阅读量73

点赞数

文章标签： vue js html javascript

本文链接：https://blog.csdn.net/weixin_50753646/article/details/108538860

版权

图片轮播（opacity || display）

#VUE开发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.navbar {
				height: 460px;
				width: 1200px;

				margin: 100px auto;
			}
			.rotationBox {
				height: 100%;
				width: 100%;
				position: relative;
				overflow: hidden;
			}
			.rotationBox ul {
				list-style-type: none;
				width: auto;
				height: 100%;
			}
			.rotationBox li {
				width: 100%;
				float: left;
				opacity: 0;
				/* display: none; */
				position: absolute;
			}
			.rotationBox li:first-of-type {
				opacity: 1;
				/* display: block; */
			}
			.rotationBox img {
				height: 100%;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="navbar">
			<div class="rotationBox">
				<ul id="ratation">
					<li v-for="items in barData">
						<a v-bind:href="items[1]"><img v-bind:src="items[0]" /></a>
					</li>
				</ul>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			const ratation = new Vue({
				el: '#ratation',
				data: {
					barData: [['./images/001.webp', '001'], ['./images/002.jpg', '002'], ['./images/003.webp', '003'], ['./images/004.webp', '004'], ['./images/005.webp', '005']],
					amount: 0,
					count: 0,
					flag: true
				},
				methods: {
					showImg: function(number) {
						let timer = null;
						let els = this.$el.children;
						let old = 100;
						let prew = 0;
						if (this.flag === false && old === 100) {
							console.log('stop');
							return;
						} else {
							console.log('start');
						}
						clearInterval(timer);
						timer = setInterval(() => {
							old -= 4;
							prew += 4;
							// 阻止运动
							if (old <= 0) {
								clearInterval(timer);
								setTimeout(() => {
									number++;
									if (number > this.amount - 1) {
										number = 0;
									}
									this.count = number;
									this.showImg(this.count);
								}, 2000);
							}
							if (old <= 0) {
								number + 1 >= this.amount ? (els[0].style.zIndex = 1) : (els[number + 1].style.zIndex = 1);
							}
							// 初始化
							if (number >= this.amount - 1) {
								for (let i = 0; i < els.length; i++) {
									if (i === 0) {
										els[0].style.zIndex = 1;
									} else {
										els[i].style.zIndex = 0;
									}
								}
							}
							// 运动方式
							els[number].style.opacity = old / 100;
							number >= this.amount - 1 ? (els[0].style.opacity = prew / 100) : (els[number + 1].style.opacity = prew / 100);
						}, 20);
					}
				},
				mounted: function() {
					this.amount = this.barData.length;
					// 起始状态
					setTimeout(() => {
						this.showImg(this.count);
					}, 2000);

					// 监听事件
					this.$el.addEventListener('mouseout', evt => {
						this.flag = true;
						// 重启
						setTimeout(() => {
							this.showImg(this.count);
						}, 2000);
					});
					this.$el.addEventListener('mouseover', evt => {
						this.flag = false;
					});
				}
			});
		</script>
	</body>
</html>