慕课网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
1 <!DOCTYPE html> 2 <html> 3 4 <head lang="zh-CN"> 5 <meta charset="UTF-8"> 6 <title>6-2 作业题</title> 7 <script type="text/javascript" src="./js/6-2.js"></script> 8 <link rel="stylesheet" href="./css/6-2.css" type="text/css" /> 9 </head> 10 <body> 11 <div id="main"> 12 <!-- 文字部分 --> 13 <div id="font-div" class="font-div"> 14 <a href="#"><div class="font change">首页</div></a> 15 <a href="#"><div class="font">点击看看</div></a> 16 <a href="#"><div class="font">会自动的</div></a> 17 <a href="#"> <div class="font">我的网站</div></a> 18 </div> 19 <!-- 轮播图片 --> 20 <div id="pic-div" class="pic-div"> 21 <a href="#"> <div class="pic pic1 active"></div></a> 22 <a href="#"> <div class="pic pic2"></div></a> 23 <a href="#"> <div class="pic pic3"></div></a> 24 <a href="#"> <div class="pic pic4"></div></a> 25 </div> 26 </div> 27 28 </body> 29 </html>
参考代码:CSS
1 *{ 2 margin:0; 3 padding:0; 4 font-size:22px; 5 font-family:"Microsoft YaHei" serif; 6 7 } 8 #main{ 9 width:1200px; 10 height:auto; 11 margin:20px auto; 12 13 } 14 /* 文字部分 */ 15 .font-div{ 16 width:100%; 17 height:46px; 18 19 } 20 .font-div a div{ 21 float:left; 22 width:25%; 23 height:46px; 24 box-sizing:border-box; 25 text-align:center; 26 line-height:46px; 27 color:#666; 28 } 29 .change{ 30 font-weight:bold; 31 border:1px solid #ffcc00; 32 border-radius:0.5em; 33 background:#ffcc00; 34 } 35 36 37 /* 图片部分 */ 38 .pic-div{ 39 width:100%; 40 height:460px; 41 background-color:green; 42 } 43 .pic{ 44 width:100%; 45 height:100%; 46 display:none; 47 } 48 .active{ 49 display:block; 50 } 51 .pic1{ 52 background:url(../images/6-2/1.jpg) no-repeat; 53 } 54 .pic2{ 55 background:url(../images/6-2/2.jpg) no-repeat; 56 } 57 .pic3{ 58 background:url(../images/6-2/3.jpg) no-repeat; 59 } 60 .pic4{ 61 background:url(../images/6-2/4.jpg) no-repeat; 62 }
参考代码:JS
1 window.onload = function () { 2 function byId(id) { 3 return typeof (id) === "string" ? document.getElementById(id) : id; 4 } 5 // 定义图片元素集合 6 var pics = document.getElementsByClassName("pic"), 7 len = pics.length, 8 index = 0, 9 timer = null, 10 main = byId("main"); 11 // 定义文字元素集合 12 var fonts = document.getElementsByClassName("font"); 13 //图片切换,以index值为切入点 14 function picChange() { 15 for (var i = 0; i < len; i++) { 16 pics[i].style.display = "none"; 17 } 18 pics[index].style.display = "block"; 19 } 20 // 文字切换 21 function fontChange() { 22 for (var i = 0; i < len; i++) { 23 fonts[i].className = "font"; 24 } 25 fonts[index].className = "font change"; 26 } 27 // 图片、文字自动切换 28 function auto() { 29 timer = setInterval(function () { 30 index++; 31 if (index >= len) { 32 index = 0; 33 } 34 picChange(); 35 fontChange() 36 }, 1000) 37 } 38 main.onmouseover = function () { 39 if (timer) { 40 clearInterval(timer); 41 } 42 } 43 main.onmouseout = function () { 44 auto(); 45 } 46 // 鼠标点击文字变色,图片更换 47 for (var i = 0; i < len; i++) { 48 fonts[i].setAttribute("data_index", i); 49 fonts[i].onclick = function () { 50 index = this.getAttribute("data_index"); 51 picChange(); 52 for (var j = 0; j < len; j++) { 53 fonts[j].className = "font"; 54 } 55 this.className = "font change"; 56 } 57 } 58 59 auto(); 60 }