【两种方法实现 CSS/Javascript 简单的图片轮播效果】

最新推荐文章于 2024-01-27 20:21:08 发布

sakura欣悠

最新推荐文章于 2024-01-27 20:21:08 发布

阅读量688

点赞数 1

分类专栏：前端文章标签： css javascript css3

本文链接：https://blog.csdn.net/sakura22123/article/details/126714381

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

方法①纯CSS动画实现图片轮播效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;

				box-sizing: border-box;
			}

			.imgBox {
				margin: 0 auto;
				width: 300px;
				height: 280px;
				overflow: hidden;
				background-color: #00E649;
			}

			.showBox {
				height: 280px;
				width: 1500px;
				animation: move 16s infinite linear;
			}

			.imgBox img {
				float: left;
				width: 300px;
				height: 280px;
				border: 2px solid #FFF;
			}

			@keyframes move {
				0% {
					transform: translateX(0px);
				}

				25% {
					transform: translateX(-300px);
				}

				50% {
					transform: translateX(-600px);
				}

				75% {
					transform: translateX(-900px);
				}

				100% {
					transform: translateX(-1200px);
				}
			}
		</style>
	</head>
	<body>
		<!-- 方式① 纯CSS实现 轮播图效果 -->
		<div class="imgBox">
			<div class="showBox">
				<a href=""><img src="image/01.png" alt=""></a>
				<a href=""><img src="image/02.png" alt=""></a>
				<a href=""><img src="image/03.png" alt=""></a>
				<a href=""><img src="image/04.png" alt=""></a>
				<a href=""><img src="image/01.png" alt=""></a>
			</div>
		</div>
	</body>
</html>

方法②Javascript定时器实现图片轮播效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;

				box-sizing: border-box;
			}

			.box {
				width: 300px;
				height: 280px;
				overflow: hidden;
				background-color: #00E649;
				margin: 0 auto;
			}

			.box img {
				float: left;
				width: 300px;
				height: 280px;
				border: 2px solid #FFF;
			}
		</style>
	</head>
	<body>
		<!-- 方法② 使用Javascript定时器来实现 -->
		<div class="box">
			<a href=""><img src="image/01.png" alt="" id="imgSlider" /></a>
		</div>

		<script type="text/javascript">
			var img = document.getElementById("imgSlider");

			var imgArr = ["image/01.png", "image/02.png", "image/03.png", "image/04.png", "image/01.png"];

			var ind = 0;
			var change = function() {
				ind = (ind + 1) % imgArr.length;
				img.src = imgArr[ind];
			}
			var time = 2000;
			var timer =  setInterval(change,time);
		</script>
	</body>
</html>