题目:使用淡入淡出动画,实现轮播图效果 | |||
该程序评分标准如下: | |||
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代码
完整代码:
![](img/img_1.jpg)
![](img/img_2.jpg)
![](img/img_3.jpg)
![](img/img_4.jpg)
![](img/img_5.jpg)
![](img/img_6.jpg)