本项目我们首先进行“党建工作”页面的设计，通过本页面的设计，我们JQuery的基本语法与使用，熟练使用JQuery、JavaScript、插件Swiper等进行轮播图的设计，并能使用他们进行页面交互效果的添加。

【 案例展示 】

学习任务

重点、难点

突破方法

1. JQuery实现轮播图。

1. JQuery的使用。

2. 教学难点：页面交互效果的实现。

采用翻转课堂、项目导入的教学模式，采用分组讨论、案例教学、演示动画等教学方法，运用在线教学平台。

知识目标

能力目标

素质目标

1.掌握JQuery的基本语法；

2.掌握JavaScript实现页面交互；

3.掌握JQuery实现动画的方法；

4.掌握轮播图的实现。

1.能够熟练应用JQuery完成基本操作；

2.能够利用JavaScript实现页面交互；

3.能够利用JQuery实现页面动画；

4.能够实现轮播图。

1.具有爱国爱党的爱国主义情怀；

2.提升职业自豪感；

3.具有实践动手能力；

4.具备团队协作精神。

课程思政——梦想

【课前导学区】

   1、发布任务

         导学任务单

   2、辅学资源

         电子讲义

         电子课件

         教学设计

【 视频讲解】

知识储备及案例实现

任务1 JQuery实现

1、轮播图效果的实现1

2、轮播图效果的实现2

3、轮播图效果的实现3

4、轮播图效果的实现4

【 课后自测区 】

自评自测

     扫描二维码回答问题                                    扫描二维码自测

    1、 材料阅读                                           【简介】讲好党故事案例展示。

  爱国主义教育展示1

【 资料下载 】

单元设计

教学设计17-JQuery实现轮播图 .pdf

课程教案

 教案17-JQuery实现轮播图 .pdf

演示文稿

  项目6 公司网站“党建工作“页面设计.pptx

任务工单

公司网站“党建工作”的页面设计

素材下载

     1、区块划分前基本的css文件.rar

    项目6 轮播图图片素材下载.rar

    项目6 图片素材下载.rar

课内同步项目

   “党建工作”移动端页面设计

课外扩展项目

    黑色商业咨询服务响应式html5网页.rar 

练习题

   1、练习1

疑难问题解答

    1、H5逐步实现拖放功能介绍。