《网站前端技术》621-7（梁玲）课件 第五章 JQuery常用函数_第1页
《网站前端技术》621-7（梁玲）课件 第五章 JQuery常用函数_第2页
《网站前端技术》621-7（梁玲）课件 第五章 JQuery常用函数_第3页
《网站前端技术》621-7（梁玲）课件 第五章 JQuery常用函数_第4页
《网站前端技术》621-7（梁玲）课件 第五章 JQuery常用函数_第5页
已阅读5页，还剩65页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网站前端技术》签到扫码下载文旌课堂APP扫码签到（2022.3.2515:00至2022.3.2515:10）签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。全课导航第1章网站建设概述第2章HTML与HTML5第3章CSS与CSS3第4章JavaScript基础第5章JQuery常用函数第6章开发者商务网站建设05PARTONE

第5章JQuery常用函数01*12掌握JQuery捕获及创建HTML。掌握JQuery获取及设置元素内容、文本、属性。掌握JQuery设置HTML元素的CSS样式。掌握JQuery删除、查找、克隆元素。熟悉JQuery常用事件及典型案例。掌握JQuery的基本使用方法，加强学生的网页设计能力。制作轮播图，锻炼学生的实践能力，培养学生的探究精神。学习目标素质目标学习目标目录CONTNETS本章导航6

综合案例——轮播图JQuery设置HTML元素CSS样式0305JQuery常用事件及典型案例JQuery捕获及创建HTML元素01JQuery设置及获取HTML相关内容或属性02JQuery删除、查找及克隆元素0401*01JQuery捕获及创建HTML元素01*5.1JQuery捕获及创建HTML元素JQuery的基本使用JQuery能够捕获HTML元素，其中的捕获机制与在CSS中使用选择器匹配元素相同。此外，JQuery还能创建元素，其创建方式与捕获元素相同，都是使用方法$()。$()方法“()”中通常使用字符串参数，参数包括HTML标签与CSS选择器等。01*5.1.1捕获元素在JQuery中捕获元素时，捕获不同元素的$()方法，“()”中字符串参数是不同的。根据id名称捕获HTML元素的语法格式如下：$("#id名称")例如，捕获id名称为A的元素，代码如下：$("#A")根据类名捕获HTML元素的语法格式如下：$(".类名")例如，捕获类名为B的元素，代码如下：$(".B")根据标签名称捕获HTML元素的语法格式如下：$("标签名称")例如，捕获所有div元素，代码如下：$("div")根据属性捕获HTML元素的语法格式与CSS中的属性选择器类似，包括以下几种。（1）$("[属性名]")：捕获所有具有指定属性的元素，不管属性值是什么。（2）$("[属性名='值']")：捕获属性为指定值的元素。（3）$("[属性名^='值']")：捕获属性以值开头的元素。（4）$("[属性名$='值']")：捕获属性以值结尾的元素。（5）$("[属性名*='值']")：捕获属性包含值的元素。01*【示例5-1-1】

在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $("div[class='p1']").css({ "border":"5pxgroovered" }); })</script>【效果】捕获class属性值为p1的所有div元素，并设置其边框属性。5.1.1捕获元素01*高手点拨

“$(selector).css();”表示为捕获的元素设置CSS样式。01*【示例5-1-2】

在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $("div[class*='o']").css({ "background":"lightyellow" }); })</script>【效果】捕获class属性值包含字符o的所有div元素，并设置其背景颜色。5.1.1捕获元素01*5.1.1捕获元素根据元素的位置捕获HTML元素，其语法格式与CSS中的伪元素类似，包括以下几种。（1）$("selector:first")：捕获第一个元素。（2）$("selector:last")：捕获最后一个元素。（3）$("selector:odd")：捕获索引值为奇数的元素。（4）$("selector:even")：捕获索引值为偶数的元素。（5）$("selector:eq(n)")：捕获索引值为n元素。（6）$("selector:gt(n)")：捕获索引值大于n元素。（7）$("selector:lt(n)")：捕获索引值小于n元素。【示例5-1-3】

在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $("tr:odd").css({ "background":"lightblue" }); })</script>【效果】捕获表格中所有奇数行，并设置其背景色。01*【示例5-1-4】

在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $(".menu:first").css({ "color":"red" }); })</script>【效果】捕获第一个类名为menu的元素，并设置其文本颜色。5.1.1捕获元素01*5.1.1捕获元素根据后代选择器捕获HTML元素，其语法格式与CSS中的后代选择器类似，代码如下：$("选择器1选择器2")【示例5-1-5】

在HTML文档头部添加<script>标签，编辑代码如下：【示例5-1-5】编辑HTML文档<body>标签的内容，代码如下：<body> <ulid="zhixia"class="first">直辖市 <li>北京</li> <li>天津</li> <li>上海</li> <li>重庆</li> </ul>01*5.1.1捕获元素<ulid="huabei"class="first">华北地区 <li>内蒙古</li> <li>河北</li> <li>山西<br> <ul> <li>太原</li> <li>大同</li> <li>运城</li> </ul> </li> </ul>

01*5.1.1捕获元素

<ulid="huanan"class="first">华南地区 <li>香港</li> <li>澳门</li> <li>广东<br/> <ul> <li>广州</li> <li>深圳</li> <li>珠海</li> </ul> </li> </ul></body>01*5.1.1捕获元素在文档头部添加<style>标签与<script>标签，编辑代码如下：<style> .first{ width:200px; height:auto; float:left; margin-left:30px; }</style><script> $(function(){ $("#huabeili").css({ "margin-top":"10px" }) })</script>01*5.1.1捕获元素【效果】捕获id属性值为huabei的元素，为其所有后代元素中的li元素设置10px的顶端外边距，如图5-1-1所示。图5-1-1后代选择器示例运行结果

根据子代选择器捕获HTML元素，其语法格式与CSS中的子代选择器类似，代码如下：$("选择器1>选择器2")【示例5-1-6】将【示例5-1-5】中的<script>标签代码修改为：<script> $(function(){ $("#huabei>li").css({ "margin-top":"10px" }); })</script>01*5.1.1捕获元素【效果】捕获id属性值为huabei的ul元素，为其直接子元素中的li元素设置10px的顶端外边距，而二层子元素的顶端外边距不变，如图5-1-2所示。图5-1-2子代选择器示例运行结果01*5.1.2

创建HTML元素使用JQuery创建HTML元素的语法格式如下：varHTML元素对象名称=$("HTML标签代码");【示例5-1-7】在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ varbox=$("<divclass='box'></div>"); box.appendTo('body'); })</script>【效果】创建一个类名为box的div元素。01*高手点拨

使用JQuery创建HTML元素之后，还必须编辑追加元素对象的代码才能将其添加到页面流中，追加方法将在5.4.4节中详细介绍。01*5.1.3

获取同类名元素的下标值

使用JQuery函数可以非常方便地获取当前被访问元素在同一类名元素中的下标值，能够大大提高选项卡这类交互效果的效率，其语法格式如下：varindex=$(this).index(".类名");【示例5-1-8】在HTML文档<body>标签内添加6个类名为select-title的div元素，并设置基本样式。然后在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $(".select-title").click(function(){ varindex=$(this).index(".select-title"); alert(index); }); })</script>【效果】当单击类名为select-title的元素时，获得当前元素在所有同类名元素中的下标并将其弹出。此下标值从0开始计算，即单击第3个元素时，弹出的内容为2。01*高手点拨

（1）click()是JQuery中的鼠标事件函数，鼠标单击对应元素后，即会执行其中设置的事件代码。（2）alert()能够弹出一个带有指定消息和确定按钮的警告框，该消息可以是字符串，也可以是通过JQuery获取的内容。02*02JQuery设置及获取HTML相关内容或属性02*5.2.1

设置及获取文本text()将HTML元素的文本设置为指定字符串的语法格式如下：元素对象.text("字符串");【示例5-2-1】编辑HTML文档<body>标签的内容，代码如下：<body> <divid="box"> <span>我的中国心</span> </div></body>在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ varbox=$("#box"); box.text("我的爱国心"); })</script>【效果】id属性值为box的div元素文本被修改为“我的爱国心”。02*5.2.1

设置及获取文本text()获取HTML元素文本的语法格式如下：元素对象.text()；【示例5-2-2】将【示例5-2-1】中<script>标签修改为如下代码：<script> $(function(){ varbox=$("#box"); alert(box.text()); })</script>【效果】弹出警告框，显示id属性值为box的div元素文本，即“我的中国心”。02*5.2.2

设置及获取内容html()使用html()设置HTML元素文本的语法格式如下：元素对象.html("字符串");【示例5-2-3】将【示例5-2-1】中<script>标签修改为如下代码：<script> $(function(){ varbox=$("#box"); box.html("我的爱国心"); })</script>【效果】与示例5-2-1效果相同。html()与text()类似，都可以设置HTML元素的文本，但它们在获取内容时功能有所区别。text()只能获取文本，而html()能够获取所有HTML内容。02*5.2.2

设置及获取内容html()使用html()获取HTML元素HTML内容的语法格式如下：元素对象.html()【示例5-2-3】将【示例5-2-1】中<script>标签修改为如下代码：<script> $(function(){ varbox=$("#box"); alert(box.html()); })</script>【效果】弹出警告框，显示id属性值为box的div元素的HTML内容，即“<span>我的中国心</span>”。02*5.2.3

设置及获取属性attr()attr()能够为元素对象设置属性，也能够获取元素对象指定属性的值为HTML元素设置属性的语法格式如下：元素对象.attr("属性名称","属性的值");【示例5-2-5】编辑HTML文档<body>标签的内容，代码如下：<body> <inputtype="text"name="userName"value="请输入用户名"id="input1"></body>在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ varinput1=$("#input1"); input1.attr("type","password"); })</script>【效果】文本框的type属性值被修改为password，即文本框中的文本以黑色圆点显示。02*5.2.3

设置及获取属性attr()获取HTML元素指定属性值的语法格式如下：元素对象.attr("属性名称")【示例5-2-6】将【示例5-2-5】中<script>标签修改为如下代码：<script> $(function(){ varinput1=$("#input1"); alert(input1.attr("type")); })</script>【效果】弹出警告框，显示文本框的type属性值，即“text”。02*5.2.4

设置及获取窗口滚动条顶端位置scrollTop()设置窗口滚动条顶端位置的语法格式如下：$(window).scrollTop(数值);【示例5-2-7】在页面中添加一个超过页面大小的div元素，以显示窗口滚动条。在HTML文档头部添加<script>标签，编辑代码如下：<script> $(function(){ $(window).scrollTop(300); })</script>【效果】页面中的窗口滚动条处于距离页面顶端300px处。如果页面的内容超出了可视范围，页面会自动显示窗口滚动条，用于滑动屏幕浏览内容。scrollTop()就是设置滚动条位置的方法，它能够设置及获取竖向窗口滚动条距离窗口顶端的位置02*5.2.4

设置及获取窗口滚动条顶端位置scrollTop()获取窗口滚动条顶端位置的语法格式如下：$(window).scrollTop();其中，获取到的数值单位为px。【示例5-2-8】在页面中添加一个超过页面大小的div元素，以显示窗口滚动条。继续在<body>标签中编辑如下代码：<inputtype="button"value="顶端位置"onclick="alert($(window).scrollTop());">【效果】滚动鼠标移动窗口滚动条，单击“顶端位置”按钮，弹出警告框，显示当前窗口滚动条顶端位置的数值。如果页面的内容超出了可视范围，页面会自动显示窗口滚动条，用于滑动屏幕浏览内容。scrollTop()就是设置滚动条位置的方法，它能够设置及获取竖向窗口滚动条距离窗口顶端的位置02*5.2.5

获取窗口宽度width()与高度height()获取窗口宽度的语法格式如下：$(window).width();其中，获取到的数值单位为px。获取窗口高度的语法格式如下：$(window).height();其中，获取到的数值单位为px。03*03JQuery设置HTML元素CSS样式03*5.3.1

隐藏和显示元素在JQuery中，隐藏和显示元素的方法有很多种，使用这些方法的语法格式如下：元素对象.方法名称();其中，常见的方法有以下9种。（1）隐藏元素hide()：隐藏指定的元素对象。【示例5-3-1】将【示例5-2-1】中<script>标签修改为如下代码：<script> $(function(){ varbox=$("#box"); box.hide(); })</script>【效果】id属性值为box的元素被隐藏。03*方法描述隐藏元素hide()隐藏指定的元素对象。显示元素show()显示指定元素对象淡入fadeIn()淡入指定元素对象。淡出fadeOut()淡出指定元素对象。淡入淡出切换fadeToggle()切换元素对象的淡入淡出效果。渐变到指定透明度fadeTo()元素对象按照指定时间曲线渐变为指定透明度，完成后执行callback回调函数。使用该方法的语法格式如下：$(selector).fadeTo(speed,opacity,callback);向下滑动slideDown()向下滑动指定元素对象。向下滑动slideUp()向上滑动指定元素对象。向上向下滑动切换slideTogle()切换元素对象的向上向下滑动效果。表5-3-1隐藏和显示元素的方法5.3.1

隐藏和显示元素03*5.3.1

设置HTML元素的CSS样式css()方法设置HTML元素的CSS样式，语法格式如下：元素对象.css({"属性名称1":"属性值1","属性名称2":"属性值2",…,"属性名称n":"属性值n"});【示例5-3-2】将【示例5-2-1】中<script>标签修改为如下代码：<script> $(function(){ varbox=$("#box"); box.css({ "width":"300px", "height":"200px", "background":"red" }); })</script>【效果】为id属性值为box的元素设置CSS样式。04*04JQuery删除、查找及克隆元素04*5.4.1

删除元素remove()使用remove()删除元素，其语法格式如下：元素对象.remove();【示例5-4-1】将【示例5-2-1】中<script>标签修改为如下代码：<script> $(function(){ varspan=$("span"); span.remove(); })</script>【效果】span元素的内容被删除。04*5.4.2

查找父元素parent()使用parent()查找父元素，其语法格式如下：元素对象.parent();【示例5-4-2】将【示例5-4-1】中<script>标签修改为如下代码：<script> $(function(){ varspan=$("span"); alert(span.parent().html()); })</script>【效果】弹出警告框，显示span元素父元素的HTML内容，即“<span>我的中国心</span>”。04*5.4.3

查找子元素find()使用find()查找子元素，其语法格式如下：元素对象.find();【示例5-4-2】将【示例5-4-1】中<script>标签修改为如下代码：<script> $(function(){ varbox=$("#box"); box.find("span").html("我的爱国心"); })</script>【效果】查找id属性值为box的元素的子元素，将其中的span元素文本替换为“我的爱国心”。04*5.4.4

克隆元素clone()和追加元素appendTo()、append()在JQuery中含有一些方法可以克隆和追加元素。clone()用于克隆指定的元素对象，其语法格式如下：元素对象.clone();克隆元素之后还必须追加元素才能让克隆出来的元素出现在页面流中。小提示

appendTo()能够将一个元素对象作为子元素追加到另一个元素对象中，其语法格式如下：元素对象1.appendTo(元素对象2);其中，元素对象1作为子元素被追加到元素对象2中。append()能够在一个元素对象中追加一个子元素，其语法格式如下：元素对象1.append(元素对象2);其中，元素对象2作为子元素被追加到元素对象1中。04*【效果】复制span元素并追加到id属性值为box的元素内部末尾，将其中的文本设置为“我的爱国心”，即显示为“我的中国心我的爱国心”。【示例5-4-4】

将【示例5-4-3】中<script>标签修改为如下代码：<script> $(function(){ varspan=$("span:eq(0)"); span.clone().appendTo("#box").html("我的爱国心"); })</script>5.4.4

克隆元素clone()和追加元素appendTo()、append()05*05JQuery常用事件及典型案例05*5.5

JQuery常用事件及典型案例JQuery有很多事件与JavaScript相匹配，下面介绍几种常用的DOM元素事件和窗口监听事件。常用的DOM元素事件。使用DOM元素事件的语法格式如下：元素对象.事件名称(function(){事件触发行为});其中，常用的DOM元素事件有鼠标单击事件click()、鼠标移至事件mouseover()、鼠标移出事件mouseout()、获取焦点事件focus()、失去焦点事件blur()等。常用的窗口监听事件。使用窗口监听事件的语法格式如下：$(window).事件名称(function(){事件触发行为});其中，常用的窗口监听事件有窗口滚动事件scrollTop()、窗口尺寸变化事件resize()等。05*5.5.1

案例——选项卡效果【场景描述】选项卡效果应用广泛，在许多网页中都能看到它的影子，它能够将同层级的内容折叠在一起，使用更小的页面空间展示更多的内容，如图5-5-1所示。图5-5-1选项卡交互前后效果【思路分析】（1）设置所有的选项卡元素为同一个类名，所有的内容元素为另一个相同的类名。（2）默认凸显第一个选项卡及相应内容。（3）在单击其中一个选项卡时，获取当前选项卡在该类元素中的下标index。同时，显示第index个内容元素并凸显第index选项卡，隐藏其他内容元素。05*5.5.1

案例——选项卡效果【实现步骤】小提示注意引入JQuery函数库。1.编辑HTML文档<body>标签的内容，代码如下：<body> <divclass="title">标题一</div> <divclass="title">标题二</div> <divclass="title">标题三</div> <divclass="title">标题四</div> <divclass="content">内容一</div> <divclass="content">内容二</div> <divclass="content">内容三</div> <divclass="content">内容四</div> </body>05*5.5.1

案例——选项卡效果2.设置选项卡元素与内容元素的基本样式。3.在相关联的JS文件中输入如下代码：$(function(){ $(".content").hide(); $(".content:eq(0)").show(); $(".title:eq(0)").css({ "background":"#B91720" }); $(".title").click(function(){ varindex=$(this).index(".title"); $(".content").hide(); $(".content:eq("+index+")").show(); 05*【实现效果】页面加载后，显示“内容一”面板，单击“标题二”选项卡，显示“内容二”面板，依次类推。5.5.1

案例——选项卡效果$(".title").css({ "background":"blue" });$(".title:eq("+index+")").css({ "background":"#B91720" }); })})18*5.5.2

案例——自动显示与隐藏的返回顶部按钮【场景描述】许多网页都设有“返回顶部”按钮，当窗口滚动条向下移动至一定位置时，单击该按钮可以快速返回窗口顶部。而在没有向下移动窗口滚动条时，该按钮应自动隐藏。【思路分析】定义检测窗口滚动条位置的事件，在窗口滚动条顶端位置大于一定数值时，显示“返回顶部”按钮，当滚动条顶端位置小于一定数值时，隐藏“返回顶部”按钮。【实现步骤】1.在HTML文档中添加“返回顶部”按钮。2.通过CSS控制按钮为固定定位。3.在相关联的JS文档中输入如下代码：window.onload=function(){ varbackTop=$("#back-Top"); backTop.hide();18*5.5.2

案例——自动显示与隐藏的返回顶部按钮

$(window).scroll(function(){ if($(window).scrollTop()>300){ backTop.show(); }else{ backTop.hide(); } }) backTop.click(function(){ $(window).scrollTop(0); })}【实现效果】页面加载后，显示页面内容及窗口滚动条。当向下移动300px后，页面右下角显示“返回顶部”按钮；当滚动条距离顶端位置小于300px时，“返回顶部”按钮自动隐藏。05*5.5.3

案例——弹性布局的图片展示【场景描述】网站在设计时需要考虑适用性，为了能够让网站中的图片清晰地呈现在大多数电子产品上，程序员会根据不同的窗口宽度引用不同的图片源，并且随着窗口大小的改变动态适应。例如，苹果官网展示的手机图片，在宽屏显示时，显示为横向图片，如图5-5-2所示；在窄屏显示时，显示为纵向图片，如图5-5-3所示。

图5-5-2宽屏显示效果

图5-5-3窄屏显示效果18*【思路分析】首先判断窗口的宽度，为该状态设置合适的图片源。当窗口大小每次发生变化时，都重新判断窗口宽度，为此状态设置合适的图片源。【实现步骤】1.在HTML文档中添加一个img元素，其src属性值为空，id属性值为img1。2.在相关的JS文件中输入以下代码：window.onload=function(){ functionresizeShow(){ if($(window).width()>700){ $("img").attr("src","img/iphone1.jpg").css({ "width":"80%" }); }else{ $("img").attr("src","img/iphone2.jpg").css({ "width":"40%" }); } }5.5.3

案例——弹性布局的图片展示18* $(window).resize(function(){ resizeShow(); }) resizeShow();}5.5.3

案例——弹性布局的图片展示【实现效果】页面首次加载后判断窗口宽度是否大于700px，如果是，则显示图片“iphone1.jpg”；如果不是，则显示图片“iphone2.jpg”。在改变窗口大小时，随时判断窗口宽度是否大于700px，并应用相对应的图片源。小提示（1）为方便测试窗口宽度，该案例封装了尺寸显示函数resizeShow。（2）resize()为响应窗口尺寸变化的事件函数。06*06综合案例——轮播图06*5.6

综合案例——轮播图【案例分析】JQuery配合CSS3共同使用，能够为平铺直叙的网页添加许多生动的动态效果。例如，许多网站头部都有的轮播图效果，就是使用了JQuery中的时间间隔函数，让广告图片自动轮播，实现更加亮眼的宣传效果。案例瞬间效果如图5-6-1所示。具体制作要求有以下几点。图5-6-1

轮播图瞬间效果（1）轮播图放置在页面正中央。（2）轮播图每次播放三张图片，其中第一张图片绕自身中心旋转“45度”，第二张图片沿纸面向外方向前移200px，第三张图片绕自身中心旋转“−45度”。（3）每次轮播向左移一张图片。06*高手点拨

为了让元素永远放置在窗口正中央，应同时设置固定定位、外边距属性值为auto、左右上下偏移量均为0。06*5.6

综合案例——轮播图【案例实现】步骤11．搭建网站，创建相关HTML、CSS、JS文件（1）在C盘创建文件夹“lunbo”，并在其中创建目录“css”“js”“img”。（2）将素材“img”文件夹整体复制到“C:/lunbo”。（3）创建“index.html”文件并保存在“C:/lunbo”。（4）创建“index.css”文件并保存在“C:/lunbo/css”。（5）创建“index.js”文件并保存在“C:/lunbo/js”。（6）将“jquery-1.12.1.js”文件复制并粘贴到“C:/lunbo/js”。（7）编辑“index.html”文档头部，将“index.css”“index.js”“jquery-1.12.1.js”文件关联至本页面。06*5.6

综合案例——轮播图步骤33．在div元素中添加一个子元素（1）在刚添加的div元素中再添加一个div元素，id属性值为lunbo-boxs。（2）在index.css中设置该元素的大小为3200×200（单位为px）。步骤22．在页面中添加div元素并使其处于窗口中央（1）在index.html中添加div元素，设置id属性值为lunbo-box。（2）在index.css中设置该元素的大小为1200×200（单位为px），固定在窗口的正中央，隐藏溢出部分。06*5.6

综合案例——轮播图步骤44．循环加载8个div元素并在其中添加img元素在index.js文件的窗口加载事件中，使用循环语句在id属性值为lunbo-boxs的div元素中添加8个类名为lunbo的div子元素，且每个div子元素内都添加一个img元素，其中引用的图片地址为“banner1.jpg”～“banner8.jpg”。具体代码如下：for(vari=1;i<=8;i++){ varimgs=$("<divclass='lunbo'><imgsrc='img/banner"+i+".jpg'></div>"); imgs.appendTo("#lunbo-boxs");}步骤55．设置8个div子元素的CSS样式（1）设置它们的大小为400×130（单位为px），上边距为30px，向左浮动。（2）设置它们的透视焦距为800px，透视中心为“centercenter”。06*6．设置前三张图片的3D转换样式并封装show函数（1）在index.js的文件中封装show函数，设置前三张图片的初始化状态。即第一张图片绕Y轴旋转“45deg”，第二张图片沿屏幕向外平移200px，第三张图片绕Y轴旋转“-45deg”。具体代码如下：functionshow(){ $(".lunbo:eq(0)img").css({ "transform":"rotateY(45deg)" }); $(".lunbo:eq(1)img").css({ "transform":"translateZ(200px)" }); $(".lunbo:eq(2)img").css({ "transform":"rotateY(-45deg)" });}（2）在index.js文件的窗口加载事件中调用show函数。步骤65.6

综合案例——轮播图06*7．实现轮播效果。（1）在index.js文件中使用间隔函数，使得每2s轮播一张banner图片。间隔函数的语法格式如下：setInterval(function(){ 代码块},2000);（2）在时间间隔函数中，将第一个轮播的图片移动到其父元素末尾，并再次调用show函数，完成轮播的动作。具体代码如下

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论