一、语言和环境

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

二、题目（100分）：

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

三、推荐实现步骤

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

四、评分标准

题目：使用淡入淡出动画，实现轮播图效果

该程序评分标准如下：

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>

图片素材：

img_1.jpg

img_2.jpg

img_3.jpg

img_4.jpg

img_5.jpg

img_6.jpg

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

  1. JavaScript交互式网页设计作业目录（作业笔记）

    JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...

  2. JavaScript交互式网页设计笔记 • 【目录】

    章节 内容 实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...

  3. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  4. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  5. 【前端】javascript实现带有子菜单和控件的轮播图slider

    实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // ...

  6. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  7. JavaScript实现动态轮播图效果

    功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...

  8. 练习:javascript轮播图效果

    javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...

  9. 云南农职《JavaScript交互式网页设计》 综合机试试卷⑤——简单分类菜单

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...

随机推荐

  1. 【Android】No Android SDK found（mac）+ 真机调试

     [1]No Android SDK found 如果没下载SDK,可以去google官方下载 如果因为上网问题,这里提供两个网址,有人整理好了,这里先谢谢他们,下面两个择其一下载 http://to ...

  2. ES安装简记

    JDK # java -versionjava version "1.8.0_231"Java(TM) SE Runtime Environment (build 1.8.0_23 ...

  3. SpringBoot(2)：运行原理

    一. pom.xml 进入父项目,这里才是真正管理SpringBoot应用里面所有依赖版本的地方,SpringBoot的版本控制中心:以后我们导入依赖默认是不需要写版本:但是如果导入的包没有在依赖中管 ...

  4. I/O流之字节流

    在程序中所有的数据都是以流的形式进行传输或保存的,程序需要数据时要使用输入流读取数据,而当程序需要将一些数据保存起来时,就要使用输出流完成对于操作文件内容,要进行文件内容的操作就需要通过Java提供的 ...

  5. B树和B+树原理图文解析

    B树与B+树不同的地方在于插入是从底向上进行(当然查找与二叉树相同,都是从上往下) 二者都通常用于数据库和操作系统的文件系统中,非关系型数据库索引如mongoDB用的B树,大部分关系型数据库索引使用的 ...

  6. HTTPS及流程简析

    [序] 在我们在浏览某些网站的时候,有时候浏览器提示需要安装根证书,可是为什么浏览器会提示呢?估计一部分人想也没想就直接安装了,不求甚解不好吗? 那么什么是根证书呢?在大概的囫囵吞枣式的百度之后知道了 ...

  7. 01 - Vue3 UI Framework - 开始

    写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前 ...

  8. InnoDB学习（四）之RedoLog和UndoLog

    BinLog是MySQL Server层的日志,所有的MySQL存储引擎都支持BinLog.BinLog可以支持主从复制和数据恢复,但是对事务的ACID特性支持比较差.InnoDB存储引擎引入Redo ...

  9. Python用matplotlib绘图网格线的设置

    一.X轴网格线的设置 import matplotlib.pyplot as plt import numpy as np from pylab import mpl mpl.rcParams['fo ...

  10. 万字教你如何用 Python 实现线性规划

    摘要:线性规划是一组数学和计算工具,可让您找到该系统的特定解,该解对应于某些其他线性函数的最大值或最小值. 本文分享自华为云社区<实践线性规划:使用 Python 进行优化>,作者: Yu ...