云南农职《JavaScript交互式网页设计》综合机试试卷②——实现轮播图效果

一、语言和环境

实现语言：HTML,CSS,JavaScript,JQuery。
开发环境：HBuilder。

二、题目（100分）：

使用JQuery淡入淡出动画，实现轮播图效果

每隔2秒钟切换一张图片，共6张图片
切换到第6张图片后从头开始切换
在图片的下方显示6个小圆点，一一对应6张图片
图片切换时，图片对应的小圆点颜色同时发生变化

三、推荐实现步骤

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

四、评分标准

题目：使用淡入淡出动画，实现轮播图效果
该程序评分标准如下：
20	正确按照效果图编写出html代码
	10		正确显示图片
	10		正确地给图片
30	正确地给html元素添加CSS样式
	10		让整个轮播图区域居中显示，并添加边框
	10		使用css样式合理调整图片和圆点的位置和层叠
	10		正确设置相关样式，让图片和圆点正确显示
40	正确编写JS/JQuery代码实现图片轮播和圆点轮播
	10		正确引入Jquery库
	10		正确添加script标签和jquery外层结构代码
	10		正确编写jquery代码，使图片有淡入淡出效果
	10		正确编写jquery代码，使圆点有切换效果
10	整体效果美观以及代码编写规范
	6	整体显示效果美观
	4	Id和class命名规范，可读性好，编码书写有缩进
总分			100分

五、实现代码

JS代码

<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;
						}
						$("#ads img").eq(cur).fadeIn(2000).siblings("img").fadeOut(2000);
						$("#ads 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">
			ul{
				list-style: none;
			}
			*{
				margin: 0px;
				padding: 0px;
			}
			#ads{
				width: 800px;
				height: 400px;
				border: 15px solid pink;
				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: 340px;
			}
			#ads ul li{
				width: 12px;
				height: 12px;
				float: left;
				margin-right: 8px;
				background: rgba(255,255,255,0.7);
				border-radius:50% ;
				cursor: pointer;
			}
			#ads ul li.active{
				background: orange;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	</head>
	<body>
		<div id="ads">
			<img src="img/img_1.jpg" class="show" alt=""/>
			<img src="img/img_2.jpg"  alt=""/>
			<img src="img/img_3.jpg"  alt=""/>
			<img src="img/img_4.jpg"  alt=""/>
			<img src="img/img_5.jpg"  alt=""/>
			<img src="img/img_6.jpg"  alt=""/>
			<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;
						}
						$("#ads img").eq(cur).fadeIn(2000).siblings("img").fadeOut(2000);
						$("#ads li").eq(cur).addClass("active").siblings("li").removeClass("active");
					
					},2000);
				}
				showImg();
			});
		</script>
	</body>
</html>