小伙伴们，掌握了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实现轮播特效的更多相关文章

  1. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  2. 10慕课网《进击Node.js基础（一）》初识promise

    首先用最简单的方式实现一个动画效果 <!doctype> <html> <head> <title>Promise animation</titl ...

  3. 07慕课网《进击Node.js基础（一）》HTTP小爬虫

    获取HTML页面 var http = require('http') var url='http://www.imooc.com/learn/348' http.get(url,function(r ...

  4. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  5. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  6. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  7. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. js编写轮播图，广告弹框

    1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...

随机推荐

  1. [luogu3573 POI2014] RAJ-Rally (拓扑排序 权值线段树)

    传送门 Solution 在DAG中我们可以\(O(n)\)预处理\(Ds(u)\)表示从u表示以s为起点的最长路\(Dt(u)\)表示以u为终点的最长路,那么经过\((u,v)\)的最长路即为\(D ...

  2. 转载：SpringMVC的工作原理图

    SpringMVC的工作原理图: SpringMVC流程 1.  用户发送请求至前端控制器DispatcherServlet. 2.  DispatcherServlet收到请求调用HandlerMa ...

  3. linux tail-在屏幕上显示指定文件的末尾若干行

    博主推荐:获取更多 linux文件内容查看命令 收藏:linux命令大全 tail命令用于输入文件中的尾部内容.tail命令默认在屏幕上显示指定文件的末尾10行.如果给定的文件不止一个,则在显示的每个 ...

  4. Java基础学习总结（81）——如何尽可能的减少Java代码中bug

    Java编程语言的人气自然无需质疑,从Web应用到Android应用,这款语言已经被广泛用于开发各类应用及代码中的复杂功能. 不过在编写代码时,bug永远是困扰每一位从业者的头号难题.在今天的文章中, ...

  5. zoj——2588 Burning Bridges

    Burning Bridges Time Limit: 5 Seconds      Memory Limit: 32768 KB Ferry Kingdom is a nice little cou ...

  6. 重学数据结构系列之——平衡树之SB Tree（Size Blanced Tree）

    学习来源:计蒜客 平衡树 1.定义 对于每一个结点.左右两个子树的高度差的绝对值不超过1,或者叫深度差不超过1 为什么会出现这样一种树呢? 假如我们依照1-n的顺序插入到二叉排序树中,那么二叉排序树就 ...

  7. 从Linux 2.6.8内核的一个TSO/NAT bug引出的网络问题排查观点(附一个skb的优化点)

    梦中没有错与对,梦中没有恨和悔...最好闭上你的嘴.这样才算可爱...我不会说:这不公道,我不能接受.我会用朴素的文字记录点点滴滴,早上4点多起来,一气呵成最近的收获与评价,愤慨与忏悔. 四年多前的一 ...

  8. squid配置透明代理

    搞了半个月的squid普通代理和透明代理最终差点儿相同了!! squid配置透明代理主要有两步.见图: 第一个基本的步骤:设置client默认网关,让默认网关指向squid代理server water ...

  9. jQuery鼠标悬停显示提示信息窗体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Android应用程序相关的文件文件夹具体解释

    一.方法介绍:         每一个Android应用程序都能够通过Context来获取与应用程序相关的文件夹,这些文件夹的功能各异,每一个文件夹都有自己的特点.有时候可能会搞混淆,本文结合andr ...