《JavaScript程序设计案例教程》课件-案例2

案例二、轮播图学习目标知识链接案例实现效果演示目录学完本章节应该能做到的事情学习目标壹学习目标掌握使用Array创建数组的方法。掌握使用for遍历数组的方法。掌握有参函数的使用方法。PPT模板/moban/掌握JSON对象。理解DOM的涵义。会使用定时器setInterval。掌握鼠标的事件mouseout、mouseover和click。会遍历DOM树。能实现轮播图效果。效果演示完成本案例应该具备的知识知识链接贰知识链接列表常量、变量定义、赋值。数组的定义与遍历(for)。有参函数定义与调用。PPT模板/moban/对象（JSON）的定义与遍历。定时器setInterval和clearInterval。onmouseout、onmouseover和onclick事件。DOM元素的遍历。getElementsByTagName和getElementById方法。常量、变量定义、赋值1var01常量定义02变量定义constlet02变量定义常量、变量定义、赋值1const定义的变量不可以修改，而且必须初始化。constb=2;//正确//constb;//错误，必须初始化console.log('函数外const定义b:’+b);//有输出值b=5;//此句报错，无法修改常量、变量定义、赋值1var定义的变量可以修改，如果不初始化会输出undefined，不会报错。vara=1;console.log('函数外var定义a:'+a);//可以输出a=1functionchange(){ a=4; console.log('函数内var定义a:'+a);//可以输出a=4}change();console.log('函数调用后var定义a为函数内部修改值:’+a);//可以输出a=4常量、变量定义、赋值1let是块级作用域，函数内部使用let定义后，对函数外部无影响。leta=1;console.log('函数外let定义a:'+a);//可以输出a=1functionchange(){ leta=4; console.log('函数内let定义a:'+a);//可以输出a=4}change();console.log('函数调用后let定义a不受函数内部变量的影响:’+a);//可以输出a=1常量、变量定义、赋值1扩展：ES6新增的声明变量的关键字let，与var类似。与var对比：1.作用域不同2.不存在变量声明提升3.暂时性死区4.不允许重复声明{leta=10;varb=1;}console.log(a);//ReferenceError:aisnotdefined.console.log(b);//1console.log(a);//undefined,但是不报错。console.log(b);//ReferenceError:bisnotdefined.vara=2;letb=2;vara=123;{console.log(a);//ReferenceErrorleta;}//正确function(){vara=10;vara=1;}//报错，Duplicatedeclaration"a"function(){leta=10;vara=1;}//报错,Duplicatedeclaration"a"function(){leta=10;leta=1;}数组的定义与遍历(for)2以Array定义数组的方法：数组对象的关键字是Array。它和字面量[]等价。vararr1=newArray();//定义元素个数为0的数组vararr2=newArray('a',2,true);//定义并初始化数组console.log(arr1,arr2);数组的定义与遍历(for)2数组的遍历方法之一（以for循环遍历arrayFor.html）vararr2=newArray('a',2,true);//定义并初始化数组for(letm=0;m<arr2.length;m++){ console.log(arr2[m]);//访问数组元素}有参函数定义与调用3function函数名([参数1,参数2,……]){

函数体……}其定义语法是：定义函数时调用函数时无有参数名，有具体的值。有参数名，没有具体的值。有参函数定义与调用3functionmyFunction(a,b){ console.log(a+b);}

myFunction(7,9);对象（JSON）的定义与遍历4一组JSON对象存放在数组中01对象形式02数组形式单个JSON对象，字面量表示方式JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。常见用途：前端与后台的数据交互。JSON数据常见的有两种表现形式：对象（JSON）的定义与遍历4forin遍历JSON对象（JSONForIn.html）letperson={ "name":"Tom", "age":"18“ };for(varattrinperson){ console.log(person[attr]);//访问属性的方式一}console.log();//访问属性的方式二对象（JSON）的定义与遍历4JSON数组演示（JSONArray.html）vararr=[{"name":"zhangsan","age":123},{"name":"wangwu","age":25}];varparn=arr[0].name+"今年的年龄是"+arr[1].age+”岁吗？”;console.log(parn);定时器setInterval和clearInterval5语法格式：setInterval(JavaScript函数,等待的毫秒数)其返回值表示代表该定时器的句柄。setInterval语法格式：clearInterval(定时器句柄)其返回值无。注意:要使用clearInterval()方法,在创建执行定时操作时要使用全局变量。clearInterval开始执行代码定时器setInterval和clearInterval5与setTimeout有什么区别？定时器setInterval和clearInterval5网页不停地更换颜色，直到调用清除定时器（setInteval.html）。varhwnd=setInterval(function(){setColor()},300);

functionsetColor(){varx=document.body;x.style.backgroundColor=x.style.backgroundColor=="green"?"blue":"green";}

functionstopColor(){clearInterval(hwnd);}onmouseout、onmouseover和onclick事件6(1)onmouseover事件是指将光标移至元素上产生的事件。(2)onmouseout事件是指将光标从元素上离开时产生的事件。这2个事件往往是一起使用的，当光标移至元素上触发一个事件，产生一些效果。而在光标离开元素后又触发一个事件恢复原来的效果。onmouseout、onmouseover和onclick事件6当鼠标移动到表格行上时行的背景颜色改变，鼠标移走颜色恢复。（MouserEvent1.html）表格的HTML代码省略。。。参考网页文件<script> vartrs=document.getElementsByTagName('tr’); [].forEach.call(trs,function(row){ row.onmouseover=function(){ this.style.backgroundColor='gray'; }; row.onmouseout=function(){ this.style.backgroundColor='transparent'; };

});</script>onmouseout、onmouseover和onclick事件6好像还有个onmouseenter,它和onmouserover有什么区别呢？onmouseout、onmouseover和onclick事件6JS的click事件是最常用、最易用、一般最早接触的事件，它在点击鼠标时触发。单击事件演示<inputtype="button"value="点我点我"onclick="ds()"><script>functionds(){console.log(‘hi,Iamworld’);}</script>DOM元素的遍历7遍历的概念：JS中对HTML元素的遍历指在DOM节点树中沿着某条搜索路线，依次对树中每个节点访问，在这个过程中可能对节点进行元素特征的提取或修改。DOM节点属性简介childElementCount只读属性返回指定父元素的子元素的数量；返回的值包含子元素节点的数量，而不是所有子节点（如文本和注释节点）的数量；firstElementChild只读属性返回指定的父元素的第一个子元素；如果父元素没有子元素，则此方法将返回null值；lastElementChild只读属性返回指定的父元素的最后一个子元素；如果父元素没有子元素，则此方法将返回null值;previousElementSibling只读属性在同一树级别，返回指定元素的前一个元素；如果没有先前的同级元素，则此属性返回null；nextElementSibling属性返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点），如果没有后置的同级元素，则此属性返回null。适用于DOM元素节点遍历的方法DOM元素的遍历7DOM遍历（domBianli.html）--HTML结构<style>.this{background:red;}</style><div><pclass="this">第一段</p><p>第二段</p><p>第三段</p></div><buttononclick="toParent()">父元素</button><buttononclick="toFirstChild()">第一个子元素</button><buttononclick="toLastChild()">最后一个子元素</button><buttononclick="toPrev()">前一个元素</button><buttononclick="toNext()">后一个元素</button>DOM元素的遍历7DOM遍历（domBianli.html）--访问父节点functiontoParent(){varcurrent=document.getElementsByClassName('this')[0];if(current.parentNode&¤t.parentNode!=document.body){current.className="";current.parentNode.className="this";}else{alert('已到顶级');}}DOM元素的遍历7DOM遍历（domBianli.html）--访问第一个子节点functiontoFirstChild(){varcurrent=document.getElementsByClassName('this')[0];if(current.firstElementChild){current.className="";current.firstElementChild.className="this";}else{alert('无子元素');}}DOM元素的遍历7DOM遍历（domBianli.html）--访问最后一个子节点functiontoLastChild(){varcurrent=document.getElementsByClassName('this')[0];if(current.lastElementChild){current.className="";current.lastElementChild.className="this";}else{alert('无子元素');}}DOM元素的遍历7DOM遍历（domBianli.html）--访问前一个子节点functiontoPrev(){varcurrent=document.getElementsByClassName('this')[0];if(current.previousElementSibling){current.className="";current.previousElementSibling.className="this";}else{alert('无前元素');}}DOM元素的遍历7DOM遍历（domBianli.html）--访问后一个子节点functiontoNext(){varcurrent=document.getElementsByClassName('this')[0];if(current.nextElementSibling){current.className="";current.nextElementSibling.className="this";}else{alert('无后元素');}}getElementsByTagName和getElementById方法8语法：document.getElementsByTagName(tagname)该方法可返回带有指定标签名的对象的集合。语法：document.getElementById(id)该方法可返回对拥有指定ID的第一个对象的引用。记忆帮助：以XX为依据获取到元素（们）。getElementsByTagName和getElementById方法8getElementById演示（getElementById2.html）functionshowMe(){ document.getElementById("myHeader").innerHTML='是我在这里';}functionshowUs(){ varps=document.getElementsByTagName("p"); for(letonepofps){ onep.innerHTML='是我们'; }}<h1id="myHeader"onclick="showMe()">Thisisaheader</h1><ponclick="showUs()">I’map</p><ponclick="showUs()">I’maptoo</p>getElementsByTagName和getElementById方法8getElementsByTagName演示（getElementsByTagName.html）varflowers=document.getElementsByTagName('h1’);for(varone_flowerinflowers){ flowers[one_flower].style.border='1pxsolidred';}<h1>myheader1</h1><h2>myheader2</h2><p>myp</p>完成本章综合案例案例实现贰设计思路1第一步：创建七幅图片第二步：固定摆放这些图片的位置、大小、透明度、遮挡关系第四步：加入按钮控制第三步：让它们动起来实现步骤--设计页面架构2实现步骤--设计页面架构2<divclass="wrap"id="wrap"> <ulclass="content"><listyle="background:url(images/1.jpg)"></li><listyle="background:url(images/2.jpg)"></li><listyle="background:url(images/3.jpg)"></li><listyle="background:url(images/4.jpg)"></li><listyle="background:url(images/5.jpg)"></li><listyle="background:url(images/6.jpg)"></li><listyle="background:url(images/7.jpg)"></li></ul> <ahref="javascript:;"class="prev"><</a> <ahref="javascript:;"class="next">></a></div>实现步骤--初步样式设置2ul{ list-style:none;}.wrap{ position:relative; width:1200px; height:360px; margin:100pxauto;}.content{ position:absolute; width:100%; height:100%;}实现步骤--初始化图片位置2固定好相框（即显示图片的地方），相框不动，动的是相框里的图片。每个相框有大小、位置、透明度的属性；相框与相框之间有遮挡关系。varpicSet=[{"top":60,"left":0,"width":400,"height":240,"zIndex":1,"opacity":0},{"top":60,"left":0,"width":400,"height":240,"zIndex":2,"opacity":40},{"top":30,"left":150,"width":500,"height":300,"zIndex":3,"opacity":70},{"top":0,"left":300,"width":600,"height":360,"zIndex":4,"opacity":100},{"top":30,"left":550,"width":500,"height":300,"zIndex":3,"opacity":70},{"top":60,"left":800,"width":400,"height":240,"zIndex":2,"opacity":40},{"top":60,"left":800,"width":400,"height":240,"zIndex":1,"opacity":0}];实现步骤--初始化图片位置2把图片摆放到相框里的过程：functionsetImageParam(liArr){for(vari=0;i<liArr.length;i++){letobj=liArr[i],json=picSet[i];//每个图片对应一个位置

for(varkinjson){//通过遍历JSON属性的方法设置每一个图片的状态

if(k=='zIndex'){obj.style[k]=json[k];}elseif(k=='opacity'){obj.style[k]=json[k]/100;obj.style.filter='alpha(opacity='+json[k]+')';}else{obj.style[k]=json[k]+'px';}}}}实现步骤--初始化图片位置2在页面加载完成时应该摆放一次图片：window.onload=function(){varwrap=document.getElementById('wrap');varcont=wrap.firstElementChild||wrap.firstChild;varliArr=cont.children;

。。。//此处省略了与轮播和控制按钮有关的代码

setImageParam(liArr);//初始化显示。。。//此处省略了与轮播和控制按钮有关的代码}实现步骤--初始化图片位置2这部分代码完成后，图片已经就位，但是它们仍然不会动。实现步骤--实现动画轮播功能2不停地更换图片显示到不同的相框01CSS的作用02JS脚本的作用自动实现动画，不需要我们控制动画过程实现步骤--实现动画轮播功能2.contentli{position:absolute;background-size:100%100%!important;cursor:pointer;box-shadow:0px0px5pxrgba(0,0,0,0.4);transition:all1s;//设置过渡动画}样式部分：实现步骤--实现动画轮播功能2window.onload=function(){。。。functionrun(){ if(wrap.timer)clearInterval(wrap.timer); wrap.timer=setInterval(function(){ move(true); },2000);}functionmove(bool){ if(bool){ picSet.unshift(picSet.pop());//最后一个元素移动到最前，向左移

}else{ picSet.push(picSet.shift());//最前的元素移动到最后，向右移

} setImageParam(liArr);//按照新的状态顺序设置图片}setImageParam(liArr);//初始化显示run();//启动动画}脚本部分：（代码较多，此处仅列出关键代码）实现