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

青旅半醒 2022-12-23 11:17 25阅读 0赞

## **一、语言和环境** ##

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

## 二、**题目（100分）：** ##

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70][]

## **三、推荐实现步骤** ##

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

## **四、评分标准** ##

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

## 五、实现代码 ##

### JS代码 ###

### 完整代码： ###

<!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>

### 图片素材： ###

![20201125214700331.png][] img\_1.jpg

![20201125214709699.png][] img\_2.jpg

![20201125214715858.png][] img\_3.jpg

![20201125214723963.png][] img\_4.jpg

![20201125214728582.png][] img\_5.jpg

![20201125214736969.png][] img\_6.jpg

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221120/ebd302029d7741cdab5881e61c7d8153.png
[20201125214700331.png]: /images/20221120/c71a12e081ae416196776b0e964f2d45.png
[20201125214709699.png]: https://img-blog.csdnimg.cn/20201125214709699.png
[20201125214715858.png]: https://img-blog.csdnimg.cn/20201125214715858.png
[20201125214723963.png]: https://img-blog.csdnimg.cn/20201125214723963.png
[20201125214728582.png]: https://img-blog.csdnimg.cn/20201125214728582.png
[20201125214736969.png]: https://img-blog.csdnimg.cn/20201125214736969.png