《教学课件任务11-1：网页中的动态效果.pptx》由会员分享，可在线阅读，更多相关《教学课件任务11-1：网页中的动态效果.pptx（8页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、教材配套资源页完整PPT课件教学课件任务11-1：网页中的动态效果1网页设计与开发项目11 网站首页中的动态效果任务11-1 实现网站首页的轮播图2任务11-1 实现网站首页的轮播图 知识点 掌握JS语言的书写格式及基本语法结构 掌握数组的使用方法 掌握JS中的事件和简单函数的使用 掌握定时器方法技能点 能按照语法格式正确书写JS脚本，理解其逻辑结构 能够熟练获取页面元素并添加事件 能够正确合理的定义和调用函数3一、轮播图原理分析u轮播图原理主要是向轮播容器提供一组图片，通过用户单击按钮或者定时器触发图片切换的动作。图片即可以作为容器盒子的背景也可以作为盒子的子元素存在，在页面运行过程中侦听鼠
2、标事件，一旦事件发生则改变图像文件的路径从而实现图片的切换。4二、搭建基本界面-1.HTML代码<>u在HTML中定义好页面的组成元素：一个轮播容器、左右两个箭头5二、搭建基本界面-2.CSS样式表#adwidth:630px;height:340px;background-image:url(img01/pic1_1.jpg);margin:0 auto;position:relative;u为轮播容器和左右两个箭头添加样式。设置轮播容器的大小与图片等大，并且选取其中一幅图片作为初始背景图。#leftbtn,#rightbtnposition:absolute;top:calc(50% - 20px);/* 高度50%处上移20px */color: #fff;font-weight: bold;font-size: 40px;cursor: pointer;#leftbtnleft:30px; #rightbtnright:30px; 6实训任务u完成网上商城首页中的视频广告部分，使用默认的视频控制栏。7本课件制作整理者：郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权，请联系删除。 8