云南农职《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>
图片素材:






云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果的更多相关文章
- JavaScript交互式网页设计作业目录(作业笔记)
JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...
- JavaScript交互式网页设计笔记 • 【目录】
章节 内容 实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
- 【前端】javascript实现带有子菜单和控件的轮播图slider
实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // ...
- 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
- JavaScript实现动态轮播图效果
功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...
- 练习:javascript轮播图效果
javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷⑤——简单分类菜单
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...
随机推荐
- LeetCode1579题——圆圈中最后剩下的数字
1.题目描述:0,1,,n-1这n个数字排成一个圆圈,从数字0开始,每次从这个圆圈里删除第m个数字.求出这个圆圈里剩下的最后一个数字.例如,0.1.2.3.4这5个数字组成一个圆圈,从数字0开始每次删 ...
- 转 android design library提供的TabLayout的用法
原文出处:http://chenfuduo.me/2015/07/30/TabLayout-of-design-support-library/ 在开发中,我们常常需要ViewPager结合Fragm ...
- NSURLSessionDownloadTask实现大文件下载
- 4.1 涉及知识点(1)使用NSURLSession和NSURLSessionDownload可以很方便的实现文件下载操作 第一个参数:要下载文件的url路径 第二个参数:当接收完服务器返回的数据 ...
- 【编程思想】【设计模式】【行为模式Behavioral】chain
Python版 https://github.com/faif/python-patterns/blob/master/behavioral/chain.py #!/usr/bin/env pytho ...
- web管理的Powerdns
在powerdns服务器上安装相应的包(基于epel源) [root@powerdns ~]# yum install pdns pdns-backend-mysql -y 在master-maira ...
- HDC2021技术分论坛:进程崩溃/应用卡死,故障频频怎么办?
作者:jiwenqiang,DFX技术专家 提到开发一个产品,我们通常首先想到的是要实现什么样的功能,但是除了功能之外,非功能属性也会很大程度上影响一个产品的体验效果,比如不定时出现的应用卡死.崩溃 ...
- Rust开发环境搭建和hello world工程
windows10 WSL 打开wsl,执行以下命令 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh 出现安装选项,选择1 ...
- IM即时通讯设计 高并发聊天服务:服务器 + qt客户端(附源码)
来源:微信公众号「编程学习基地」 目录 IM即时通信程序设计 IM即时通讯 设计一款高并发聊天服务需要注意什么 如何设计可靠的消息处理服务 什么是粘包 什么是半包 解决粘包和半包 IM通信协议 应用层 ...
- iOS-启动项目(二)引入第三方库
摘要 项目中很大几率会用到第三方库,通过 Pod 方式引入第三方库是效率很高的方式,这里介绍一个新的项目搭建 Pod 方式的环境,方便项目中引入第三方库文件. 刚创建的项目中如果需要用到第三方库,常用 ...
- ciscn_2019_ne_5
首先checksec和查看多少位的程序 可以看到是32位的程序,放入ida中 进入getflag 可以看到strcpy存在栈溢出,所以大体思路就是输入密码进入选择1造成溢出然后进入选择4获取shell ...