一、语言和环境
- 实现语言：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>