Web前端技术 课件 模块四 任务7 轮播图实现

轮播图实现Web前端技术主讲老师：何成芊延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述一般来说，轮播图都会占据页面第一屏的中心位置，所谓“欲戴王冠，必承其重”，作为占据C位的轮播图也必须承担重任，总体说来，优秀的轮播图需要完成两个方面任务：1.给静止的页面加入类似PPT换页动画效果，增强趣味性和直观性,提高用户的浏览体验；2.在有限空间里，使用空间公用的方式显示多张图片，提升了页面的信息密度，更有效的使用页面空间。在学习了JavaScript基础知识后，我们就可以通相关知识的综合使用来制作首页轮播图了。效果如图4-7-1所示。延时符学习目标延时符学习目标综合运用JavaScript知识；掌握堆栈函数(push和pop)和队列函数(shift)的使用；掌握NodeList.forEach()函数的使用；掌握for和while循环的使用；；知识目标能够根据要求编写JavaScript代码实现首页轮播图；能够使用数组和节点列表的相关函数简化代码；能够使用for或while语句实现循环结构；技能目标延时符培养整理性思维能力；培养综合运用知识能力；培养自助学习能力；素养目标知识点导图延时符知识点导图延时符相关知识延时符push()和pop()shift()和unshift()forEach()for循环for和while比较while循环push方法是javascript内置的进栈函数，用于在原数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。必须注意的是，push方法会改变（增加）原数组的成员数量。上面代码使用push方法，往原数组arr中添加了四个成员。pop方法是javascript内置的出栈函数，用于删除数组的最后一个元素，并返回该元素。必须注意的是，pop方法也会改变（减少）原数组的成员数量。push()和pop()延时符1.vararr=[];//定义空数组arr2.3.arr.push(1)//将数值1加入arr末端4.arr.push('a')//将字符’a’加入arr末端5.arr.push(true,{})//将布尔值true和空{}加入arr末端6.arr//[1,'a',true,{}]1.vararr=['a','b','c'];2.arr.pop()//'c'//将arr末端的内容删除；3.arr//['a','b']对空数组使用pop方法，不会报错，而是返回undefined。push和pop结合使用，就构成了“后进先出”的栈结构（stack）。上面代码中，3是最后进入数组的，但是最早离开数组。push()和pop()（续）延时符1.[].pop()//undefined1.vararr=[];2.arr.push(1,2);3.arr.push(3);4.arr.pop();5.arr//[1,2]shift()方法是javascript内置的出队函数，用于删除数组的第一个元素，并返回该元素。必须注意的是，shift方法也会改变（减少）原数组的成员数量。可以看出shift方法和pop方法类似，也是删除一个原来数组中的元素；不同之处在于，pop方法从末端删除，而shift方法从第一个元素删除。上面代码中，使用shift()方法以后，原数组就变了。shift()方法可以遍历并清空一个数组。shift()和unshift()延时符1.vara=['a','b','c'];2.3.a.shift()//'a'4.a//['b','c']1.varlist=[1,2,3,4];2.varitem;3.4.while(item=list.shift()){5.console.log(item);6.}7.8.list//[]上面代码通过list.shift()方法每次取出一个元素，从而遍历数组。它的前提是数组元素不能是0或任何布尔值等于false的元素，因此这样的遍历不是很可靠。push()和shift()结合使用，就构成了“先进先出”的队列结构（queue）。unshift()方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。push()和shift()结合使用，就构成了“先进先出”的队列结构（queue）。unshift()方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。unshift()方法可以接受多个参数，这些参数都会添加到目标数组头部。shift()和unshift()（续）延时符1.vara=['a','b','c'];2.3.a.unshift('x');//44.a//['x','a','b','c']ift()方法可以接受多个参数，这些参数都会添加到目标数组头部。1.vararr=['c','d'];2.arr.unshift('a','b')//43.arr//['a','b','c','d']forEach方法用于遍历NodeList的所有成员。它接受一个回调函数作为参数，每一轮遍历就执行一次这个回调函数，用法与数组实例的forEach方法完全一致。上面代码中，回调函数f的参数依次是当前成员和位置，上面的代码遍历了body的所有子节点，并将默认字体大小修改为12px。nodelist.forEach()延时符1.varchildren=document.body.childNodes;2.children.forEach(functionf(item,i){3.item.style.font=’12px’;4.});myFunction(argument1,argument2)for循环是JavaScript中创建循环时常会用到的语句。语法和C语言等常用编程语言非常类似，下面是for循环的语法：

说明：（1）语句1

（代码块）开始前执行。（2）语句2

定义运行循环（代码块）的条件。（3）语句3

在循环（代码块）已被执行之后执行。for循环延时符1.<p>点击按钮循环代码5次。</p>2.<buttononclick="myFunction()">点击这里</button>3.<pid="demo"></p>4.<script>5.functionmyFunction(){6. varstr="";7. for(vari=0;i<5;i++){8. //循环体：将字符串“该数字为i<br>”加入到字符串str中。9. str=str+"该数字为"+i+"<br>";10. }11. document.getElementById("demo").innerHTML=x;12.}13.</script>for(语句1;

语句2;

语句3) {

被循环执行的代码块 }while循环是JavaScript中创建循环时另一种常会用到的语句。会在指定条件为真时循环执行代码块。语法和C语言等常用编程语言也是类似的，下面是while循环的语法：

右面案例使用while循环将多次运行，只要变量i小于5：while循环延时符1.<p>点击下面的按钮，只要i小于5就一直循环代码块。</p>2.<buttononclick="myFunction()">点击这里</button>3.<pid="demo"></p>4.<script>5.functionmyFunction(){6. varx="",i=0;7. while(i<5){8. //循环体：将字符串“该数字为i<br>”加入到字符串str中。9. x=x+"该数字为"+i+"<br>";10. i++;11. }12. document.getElementById("demo").innerHTML=x;13.}14.</script>while(条件){

需要执行的代码}在完成上面的学习后，会发现while循环与for循环的功能非常相似，在很多的情况下可以等效替换。例如可以循环使用

for循环来显示cars数组中的所有值：for和while的比较延时符1.<script>2.cars=["BMW","Volvo","Saab","Ford"];3.vari=0;4.for(;cars[i];){5. document.write(cars[i]+"<br>");6. i++;7.}8.</script>1.<script>2.cars=["BMW","Volvo","Saab","Ford"];3.vari=0;4.while(cars[i]){5. document.write(cars[i]+"<br>");6. i++;7.}8.</script>同样的功能也可以使用while实现：任务实施延时符任务分析技术分析与实现完成代码任务分析延时符实现轮播图任务，由于需要在页面加载时自动运行，所以可以使用window对象onload事件。本任务的实现，主要在window.onload的事件处理函数中，定义了图片切换函数move()，下一张图片函数next()，上一张图片函数previous()，播放轮播图函数play()四个核心功能函数；另外定义了初始化函数init()，生成track图片点按钮元素并调用play()实现自动运行轮播图；用使用事件绑定和事件监听功能为轮播图的上一张，下一张和图片点按钮加上了对应的交互功能。window.onload()结构图如图4-7-3所示：技术分析与实现：步骤1延时符步骤1；获取节点。当前任务需要轮播图所在div，轮播图上一页，下一页，图片标号按钮组等多个元素进行操作。因而，需要获取多个DOM节点和DOM节点组。代码如下所示：1.varcontent=document.querySelector('.content'),2. banner=document.querySelector('.banner'),3. btn_left=document.querySelector('.btn_left'),4. btn_right=document.querySelector('.btn_right'),5. track=document.querySelector('.track'), list_items=banner.querySelectorAll('div'); ;技术分析与实现：步骤2延时符步骤2：定义图片切换函数。在实现轮播图任务时，切换到指定index图片功能将会多次使用，因此定义为move函数。代码如下所示：1.functionmove(target){2. list_items.forEach((item,i)=>{3. item.setAttribute('class',listArr[i]);4. });5.//计算index下标值6. index=(index+listArr.length+target)%listArr.length;7. tracks.forEach((item,i)=>{8. item.setAttribute('class','');9. });10. tracks[index].setAttribute('class','focus');11.}技术分析与实现：步骤3延时符步骤3：定义切换下一张和上一张函数。在实现轮播图任务时，图片切换到下一张或上一张功能将会在多个操作下重复使用，因此定义为next和previous函数。代码如下所示：1.//下一张2.functionnext(){3. listArr.unshift(listArr[listArr.length-1]);4. listArr.pop();5. move(1)6.}7.//上一张8.functionprevious(){9. listArr.push(lis