WEB前端开发实战课件：轮播图特效

JavaScript网页特效制作

轮播图特效制作htmlh5imgjavascriptwebcsscolorhr目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展htmlh5imgjavascriptwebcolorhr任务情境广西少数民族文化资源网是一个通过网站展示广西少数民族在文化、节日、美食、古迹等方面资源的的综合性资源类的网站。其中的节日页面顶部的图片我们需要将更改为轮播图，轮播图在如今的网站当中是非常实用的一个页面功能，为了完成这个功能就需要加入JavaScript特效。工作任务单工作任务单任务要求根据效果图完成服饰详情页侧边栏制作甲方提供的设计图

如右图所示评判标准1.能够掌握getElement方法获取html页面中轮播图片元素；2.能够正确使用for循环语句将上次循环的图片active类删掉；3.能够正确使用if条件语句嵌套判断图片的张数；4.能够正确设置事件监听；5.能够正确使用定时器的用法；作品提交要求站点文件夹评判标准1.能够掌握getElement方法获取html页面中轮播图片元素；2.能够正确使用for循环语句将上次循环的图片active类删掉；3.能够正确使用if条件语句嵌套判断图片的张数；4.能够正确设置事件监听；5.能够正确使用定时器的用法；任务目标任务目标能够掌握getElement方法获取html页面中轮播图片元素；能够正确使用for循环语句将上次循环的图片active类删掉；能够正确使用if条件语句嵌套判断图片的张数；能够正确设置事件监听；能够正确使用定时器的用法；任务描述本任务是基于节日详情页进行JavaScript的制作。任务要求是每次打开网页，都能看到轮播图能正常切换，同时轮播图两旁都有左右按钮功能，可以点击并实现图片切换到上一张或者下一张的特效，现在我们将学习如何利用JavaScript完成轮播图特效。任务实施图2

效果图（有特效）图1

效果图（无特效）效果图展示编写JS特效重构html+css找出原页面轮播的HTML修改html找出原页面轮播的CSS修改CSS步骤一步骤二步骤三步骤四重构html+css操作步骤步骤六效果图展示编写JS特效任务实施重构html+css链接外部JavaScript文件获取页面元素设定变量，表示当前图片编写一个ClearActive类步骤一步骤二步骤三步骤四编写JS特效操作步骤设置左右按钮功能步骤五设置按钮监听事件步骤六添加定时器步骤七效果图展示重构html+css编写JS特效任务实施学习资源数组1.什么是数组数组是一种特殊的变量，它能够一次存放一个以上的值。2.数组的作用数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。3.如何创建数组

4.如何访问数组元素通过引用索引号（下标号）来引用某个数组元素，示例如下：5.如何遍历数组元素遍历数组的含义是对数组所有元素进行访问，遍历数组的最安全方法是使用"for"循环。实例如下：

方法一：语法:vararray-name=[item1,item2,...];实例:varcars=["Saab","Volvo","BMW"];方法二：varcars=newArray("Saab","Volvo","BMW");//利用关键词new创建数组varcars=["Saab","Volvo","BMW"];document.getElementById("demo").innerHTML=cars[0];varfruits,text,fLen,i;fruits=["Banana","Orange","Apple","Mango"];fLen=fruits.length;text="<ul>";for(i=0;i<fLen;i++){

text+="<li>"+fruits[i]+"</li>";}学习资源数组6.如何给数组添加元素1.向数组添加新元素最佳的方法是使用push（）方法。示例如下：2.也可以使用

length

属性向数组添加新元素。示例如下：7.如何改变数组中的值varfruits=["Banana","Orange","Apple","Mango"];fruits.push("Lemon")//向fruits添加一个新元素(Lemon)varfruits=["Banana","Orange","Apple","Mango"];fruits[fruits.length]="Lemon";//向fruits添加一个新元素(Lemon)varcars=["Saab","Volvo","BMW"];cars[0]="Opel";document.getElementById("demo").innerHTML=cars[0];考核评价班级：姓名：学号任务名称：页面头部固定评价项目评价标准自评情况考核情况课前自主探究（10%）完成课前学习通中下发任务£完成£基本完成R未完成□完成□基本完成□未完成工作过程（50%）JS特效分析能够进行正确的分析特效所需的JS方法□完成□基本完成□未完成□完成□基本完成□未完成

获取页面元素能够进行正确获取页面元素□完成□基本完成□未完成□完成□基本完成□未完成

if语句编写能够正确使用IF嵌套循环□完成□基本完成□未完成□完成□基本完成□未完成

事件监听能够正确编写事件代码□完成□基本完成□未完成□完成□基本完成□未完成

定时器能够正确利用定时器完成图片的轮换□完成□基本完成□未完成□完成□基本完成□未完成项目成果（30%）工作完整能够按时完成任务□是□是

工作规范能按企业规范要求进行操作□是□是

成果展示能准确表达，汇报成果□是□是非技术考评（10%）态度学习态度是否端正□是□是

纪律遵守纪律□是□是

协作有交流、团队合作□是□