小伙伴们，掌握了jQuery的语法、流程控制语句、内置对象以及DOM和BOM的知识，运用所学知识完成如下图所示的交互效果——轮播图。

效果图如下：

一、语言和环境

     1、实现语言

         HTML、CSS、jQuery

     2、 环境要求及开发工具

         建议 Sublime text

二、网页整体要求：

    1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字和背景的颜色不统一要求；

    2、要求HTML代码、CSS代码、jQuery代码书写、命名符合规范，在代码中添加必要的注释。

    3、网页文件夹管理，图片等资料独立文件夹

三、具体要求：  

    1、网页分为 以下两个部分：轮播图标题和轮播图内容

    2、高度和宽度固定，内容在页面居中显示

    3、字体及颜色表

 网页字体： Microsoft YaHei

  网页颜色：

    四、脚本要求（效果可参考效果视频）

             1、图片每2秒钟切换1次。

             2、当鼠标停留在轮播区域时，图片不进行轮播。

             3、当点击右下角的小球时，出现对应图片，而且当前小球的背景颜色也发生变化。

             4、当图片发生轮播切换时，在不点击小球前提下，相应的小球背景颜色也自动发生变化。

             5、当点击轮播图上的左右箭头时，图片和小球都发生相应的变化（左箭头是上一张图片显示、小球也需要是上一个的背景颜色发生改变；同理，右箭头是下一张图片与下一个小球）。

规范【10分】

    * 网页文件夹管理，图片、样式表、脚本等资料独立文件夹。
    * 文件、id、class命名规范。
    * HTML、CSS、jQuery代码规范及添加适量注释。

整体效果【10分】

    * 网页居中显示，轮播图效果能正常展示，鼠标划上去轮播图停止播放

小球和箭头样式【10分】

    *小球在轮播图右下角显示；

    *当鼠标没有点击时，背景颜色是灰色的，当鼠标点击时，小球的背景颜色发生变化，当轮播图显示哪张图片时，对应的哪个小球背景颜色也要发生变化

    * 左右箭头位于轮播图区域的左右两侧。

轮播图样式【10分】

    *轮播的图片不管有几张，打开页面的瞬间，只显示第一张；

轮播图脚本【30分】

    * 当鼠标停留在轮播图区域的任何一个位置时，图片轮播停止；鼠标离开时，图片继续轮播

    *图片每2秒钟切换一次

    * 图片的切换这个方法单独分装于一个函数中，方便能被多次调用

小球切换和箭头切换图片脚本【30分】

    *当点击小球时，出现相对应的图片

    * 被点击的小球样式发生生变化

    *轮播到哪张图片，他所对应的小球样式也发生变化

    *当点击左、右箭头时，出现相对应的图片，小球也发生相应的变化