慕课网6-2 作业：js实现轮播特效
小伙伴们，掌握了JavaScript的语法、流程控制语句、内置对象以及DOM和BOM的知识，运用所学知识完成如下图所示的交互效果——轮播图。
效果图如下：
具体交互效果图参考gif动态效果图，gif效果图如下：
任务描述
一、语言和环境
1、实现语言
HTML、CSS、JavaScript
2、环境要求及开发工具
Sublime text
二、网页整体要求：
1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字和背景的颜色不统一要求；
2、要求HTML代码、CSS代码、JavaScript代码书写、命名符合规范，在代码中添加必要的注释。
3、网页文件夹管理清晰，图片、样式表、脚本等资料独立文件夹
三、样式具体要求
1． 网页分为 以下两个部分：切换项标题和切换项内容
2 . 高度和宽度固定，内容在页面居中显示
3．字体及颜色表
网页字体： Microsoft YaHei
网页颜色：
4、选项卡文字在垂直和水平方向均是居中显示，文字大小是22px
四、脚本要求（效果可参考gif图）
1、图片每1秒钟切换1次。
2、当鼠标停留在整个页面上时，图片不进行轮播。
3、当点击切换页的选项上时，出现该选项的对应图片，而且切换页选项的背景颜色发生相应的变化。
4、当图片发生轮播切换时，在不点击选项卡的前提下，相应的选项卡背景颜色也自动发生变化。
评分标准是什么？
规范【10分】
* 网页文件夹管理清晰，图片、样式、脚本归置在独立的文件夹中。
* 文件、id、class、变量等命名规范。
* HTML、CSS、JavaScript代码规范及添加适量的注释。
整体效果【10分】
* 网页居中显示，轮播图效果和切换选项卡时展示对应图片的效果均能正常显示
* 鼠标放在页面上时，变小手状，且轮播图停止播放
选项卡样式【10分】
* 选项卡文字居中显示
* 当鼠标没有点击选项卡时，背景颜色是白色的
* 当鼠标点击选项卡时，背景颜色发生变化，且选项卡的四个角显示为圆角
轮播图样式【10分】
* 轮播图的图片不管有几张，当打开页面或者刷新页面是，初始的图片均是第一张
* 轮播图盒子的宽度大小与选项卡盒子的宽度大小一致
* 图片撑满轮播图的盒子
轮播图脚本【30分】
* 当鼠标停留在tab切换页上时，轮播图停止轮播
* 当鼠标离开tab切换页时，图片继续轮播
* 图片每一秒钟切换一次
* 图片的切换方法单独封装于一个函数中，方便能多次被调用
* 脚本在head标签中引用，调用页面加载后执行脚本函数
选项卡切换图片脚本【30分】
* 当点击选项卡时，出现相对应选项卡的图片
* 被点击的选项卡背景颜色和字体均发生变化
* 轮播到哪张图片，它所对应的选项卡的背景颜色和字体也会发送变化
参考代码：HTML
<!DOCTYPE html>
<html> <head lang="zh-CN">
<meta charset="UTF-8">
<title>6-2 作业题</title>
<script type="text/javascript" src="./js/6-2.js"></script>
<link rel="stylesheet" href="./css/6-2.css" type="text/css" />
</head>
<body>
<div id="main">
<!-- 文字部分 -->
<div id="font-div" class="font-div">
<a href="#"><div class="font change">首页</div></a>
<a href="#"><div class="font">点击看看</div></a>
<a href="#"><div class="font">会自动的</div></a>
<a href="#"> <div class="font">我的网站</div></a>
</div>
<!-- 轮播图片 -->
<div id="pic-div" class="pic-div">
<a href="#"> <div class="pic pic1 active"></div></a>
<a href="#"> <div class="pic pic2"></div></a>
<a href="#"> <div class="pic pic3"></div></a>
<a href="#"> <div class="pic pic4"></div></a>
</div>
</div> </body>
</html>
参考代码：CSS
*{
margin:;
padding:;
font-size:22px;
font-family:"Microsoft YaHei" serif;
}
#main{
width:1200px;
height:auto;
margin:20px auto;
}
/* 文字部分 */
.font-div{
width:100%;
height:46px;
}
.font-div a div{
float:left;
width:25%;
height:46px;
box-sizing:border-box;
text-align:center;
line-height:46px;
color:#666;
}
.change{
font-weight:bold;
border:1px solid #ffcc00;
border-radius:0.5em;
background:#ffcc00;
}
/* 图片部分 */
.pic-div{
width:100%;
height:460px;
background-color:green;
}
.pic{
width:100%;
height:100%;
display:none;
}
.active{
display:block;
}
.pic1{
background:url(../images/6-2/1.jpg) no-repeat;
}
.pic2{
background:url(../images/6-2/2.jpg) no-repeat;
}
.pic3{
background:url(../images/6-2/3.jpg) no-repeat;
}
.pic4{
background:url(../images/6-2/4.jpg) no-repeat;
}
参考代码：JS
window.onload = function () {
function byId(id) {
return typeof (id) === "string" ? document.getElementById(id) : id;
}
// 定义图片元素集合
var pics = document.getElementsByClassName("pic"),
len = pics.length,
index = 0,
timer = null,
main = byId("main");
// 定义文字元素集合
var fonts = document.getElementsByClassName("font");
//图片切换，以index值为切入点
function picChange() {
for (var i = 0; i < len; i++) {
pics[i].style.display = "none";
}
pics[index].style.display = "block";
}
// 文字切换
function fontChange() {
for (var i = 0; i < len; i++) {
fonts[i].className = "font";
}
fonts[index].className = "font change";
}
// 图片、文字自动切换
function auto() {
timer = setInterval(function () {
index++;
if (index >= len) {
index = 0;
}
picChange();
fontChange()
}, 1000)
}
main.onmouseover = function () {
if (timer) {
clearInterval(timer);
}
}
main.onmouseout = function () {
auto();
}
// 鼠标点击文字变色，图片更换
for (var i = 0; i < len; i++) {
fonts[i].setAttribute("data_index", i);
fonts[i].onclick = function () {
index = this.getAttribute("data_index");
picChange();
for (var j = 0; j < len; j++) {
fonts[j].className = "font";
}
this.className = "font change";
}
}
auto();
}
慕课网6-2 作业：js实现轮播特效的更多相关文章
- JS图片轮播[左右轮播
直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 10慕课网《进击Node.js基础（一）》初识promise
首先用最简单的方式实现一个动画效果 <!doctype> <html> <head> <title>Promise animation</titl ...
- 07慕课网《进击Node.js基础（一）》HTTP小爬虫
获取HTML页面 var http = require('http') var url='http://www.imooc.com/learn/348' http.get(url,function(r ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- js编写轮播图，广告弹框
1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...
随机推荐
- Jmeter BeanShell PreProcessor使用笔记
打印log log.info("content:" + content); 将字符串转化为JsonString import com.alibaba.fastjson.JSON; ...
- 2.8 补充：shell脚本执行方法
bash shell 脚本的方法有多种,现在作个小结.假设我们编写好的shell脚本的文件名为hello.sh,文件位置在/data/shell目录中并已有执行权限. 方法一:切换到shell脚本 ...
- 【03】全局 CSS 样式
全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...
- 【Codeforces 364A】Matrix
[链接] 我是链接,点我呀:) [题意] 让你求出b[i][j]=s[i]*s[j]规则构成的矩阵 的所有子矩阵中子矩阵的和为a的子矩阵的个数 [题解] (x,y,z,t) 会发现它的和就是sum(x ...
- 转载 - C - 枚举类型详解
出处:http://www.cnblogs.com/JCSU/articles/1299051.html 注:以下全部代码的执行环境为VC++ 6.0 在程序中,可能需要为某些整数定义一个别名,我们可 ...
- 小a和uim之大逃离（洛谷 1373）
题目背景 小a和uim来到雨林中探险.突然一阵北风吹来,一片乌云从北部天边急涌过来,还伴着一道道闪电,一阵阵雷声.刹那间,狂风大作,乌云布满了天空,紧接着豆大的雨点从天空中打落下来,只见前方出现了一个 ...
- Linux 使用pwgen命令创建随机密码
https://blog.csdn.net/fdipzone/article/details/73864598 http://www.netkou.com/?post=155
- Hackerrank alien-flowers（数学公式）
题意:求能够构造出的符合以下条件的字符串的数目 .字符串只由R和B组成且长度不为0 .字符串含有A个RR,B个RB,C个BB,D个BR A,B,C,D<=1e5 分析:最简单的方法就是dp,但是 ...
- BZOJ(1) 1003 [ZJOI2006]物流运输
1003: [ZJOI2006]物流运输 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 9404 Solved: 4087[Submit][Stat ...
- DAS NAS SAN
UNIX LINUX WINDOWS 等服务器的存储主要有两种方式DAS或者是FAS.DAS direct attached storage. 直连存储,服务器和存储直接连接.FAS,fabric-a ...