vue使用设置背景图片的方式实现淡入淡出轮播图2

最新推荐文章于 2026-08-11 15:46:33 发布

原创最新推荐文章于 2026-08-11 15:46:33 发布 · 487 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

该博客展示了一个使用Vue.js编写的图片轮播效果的代码实例。通过Vue的过渡组件和数据绑定，实现了图片的平滑切换，每5秒钟自动播放下一张图片。代码中详细定义了CSS样式以达到理想的视觉效果。

首先放一份，我调试完美运行的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			*{
				margin: 0px,
				padding: 0px;
				list-style-type: none;
			}
			
			.login_img {
				margin: 50px auto;
			}
			
			.login_img ul li {
				position: absolute;
			}
			
			.login_img .divImg {
				background-position: 0px;
				background-size: cover;
				background-repeat: no-repeat;
				width: 700px;
				height: 400px;
			}
			
			.img-enter-active, 
			.img-leave-active {
				transition: all 4s;
			}
			
			.img-enter,
			.img-leave-to {
				opacity: 0;
			}
			
			.img-enter-to,
			.img-leave {
				opacity: 1;
			}
			
		</style>
	</head>
	<body>
		<div id="root">
			<div class="login_img">
				<transition-group tag='ul' name='img'>
				    <li v-for='(image,index) in imgs' :key='index' v-show='index===mark'>
						<div class="divImg" :style="{backgroundImage: 'url('+image+')'}"></div>
				    </li>
				</transition-group>
			</div>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el: "#root",
				data: {
					cur: 0,
					mark: 0,
					imgs: [
						'img/1.jpg',
						'img/2.jpg',
						'img/3.jpg'
					],
					loginImgStyle: {
						backgroundPosition: '0px 0px',
						backgroundSize: 'cover',
						backgroundRepeat: 'no-repeat',
						backgroundImage: 'url(img/1.jpg)',
					}
				},
				created() {
				    this.play()
				},
				mounted: function() {
					
				},
				methods: {
					autoPlay() {
						if(this.mark<this.imgs.length-1){
							this.mark++;
						}else{
							this.mark = 0;
						}
					},
					play() {
					    setInterval(this.autoPlay, 5000)
					}
				}
			});
		</script>
	</body>
</html>