慕课网6-2 作业：js实现轮播特效

最新推荐文章于 2020-11-29 01:36:01 发布

weixin_34292959

最新推荐文章于 2020-11-29 01:36:01 发布

阅读量308

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/f6056/p/10947770.html

版权

小伙伴们，掌握了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 }

转载于:https://www.cnblogs.com/f6056/p/10947770.html

weixin_34292959

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
慕课网6-2 作业：js实现轮播特效

小伙伴们，掌握了JavaScript的语法、流程控制语句、内置对象以及DOM和BOM的知识，运用所学知识完成如下图所示的交互效果——轮播图。效果图如下：具体交互效果图参考gif动态效果图，gif效果图如下：任务描述一、语言和环境 1、实现语言 HTML、CSS、JavaScript 2、环境要求及开发工具 Sublime text二、网页...
复制链接

扫一扫