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

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;ifLen;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).in