使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

时间：2021-05-16 16:35:16

查看本章节

查看作业目录

需求说明：

使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片，切换到第 6 张后从头开始切换，在图片的下方显示 6 个小圆点，一一对应 6 张图片，图片切换时，图片对应的小圆点的颜色同时发生变化

使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

实现思路：

  1. 在 HTML 页面中，添加 6 个 <img /> 标签，用于显示 6 张图片
  2. 添加 1 个 <ul> 标签和 6 个 <li> 标签，用于显示图片下方的 6 个小圆点
  3. 使用 setInterval() 方法每隔 2 秒执行一次图片切换操作 在图片切换的函数中，根据索引值找到当前需要切换的图片，然后使用 fadeIn() 方法淡入，同时找到当前图片的兄弟节点，然后使用 fadeOut() 方法淡出
  4. 找到当前图片对应小圆点，添加样式类，并清除兄弟节点的样式类

实现代码：

核心代码：

<script type="text/javascript">

	$(function(){

		var timer;

		var cur = 0;

		var len = $("#ads li").length;

		function showImg(){

			timer = setInterval(function(){

				cur++;

				if(cur>=len){

					cur = 0;

				}

					console.log(cur);

				$("#ads img").eq(cur).fadeIn(2000).siblings("img").fadeOut(2000);

				$("#ads>ul>li").eq(cur).addClass("active").siblings("li").removeClass("active");

			},2000);

		}

		showImg();

	});

</script>

完整代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			*{

				margin: 0;

				padding: 0;

			}

			ul{

				list-style: none;

			}

			#ads{

				width: 590px;

				height: 250px;

				margin: 20px auto;

				position: relative;

			}

			#ads img{

				width: 100%;

				height: 100%;

				position: absolute;

				left: 0;

				top: 0;

				display: none;

			}

			#ads img.show{

				display: block;

			}

			#ads ul{

				position: absolute;

				bottom: 10px;

				left: 240px;

			}

			#ads ul li{

				width: 12px;

				height: 12px;

				float: left;

				background: whitesmoke;

				margin-right: 8px;

				border-radius: 50%;

				cursor: pointer;

			}

			#ads ul li.active{

				background: orange;

			}

		</style>

		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div id="ads">

			<img src="img/img_1.jpg" class="show">

			<img src="img/img_2.jpg" >

			<img src="img/img_3.jpg" >

			<img src="img/img_4.jpg" >

			<img src="img/img_5.jpg" >

			<img src="img/img_6.jpg" >

			<ul>

				<li class="active"></li>

				<li></li>

				<li></li>

				<li></li>

				<li></li>

				<li></li>

			</ul>

		</div>

		<script type="text/javascript">

			$(function(){

				var timer;

				var cur = 0;

				var len = $("#ads li").length;

				function showImg(){

					timer = setInterval(function(){

						cur++;

						if(cur>=len){

							cur = 0;

						}

							console.log(cur);

						$("#ads img").eq(cur).fadeIn(2000).siblings("img").fadeOut(2000);

						$("#ads>ul>li").eq(cur).addClass("active").siblings("li").removeClass("active");

					},2000);

				}

				showImg();

			});

		</script>

	</body>

</html>

相关文章