零起点HTML5+CSS3+JavaScript+jQuery前端开发案例式教程PPT课件（共14章）14创建自动播放轮播图.pptVIP

8.6 创建自动播放轮播图 8.6.1 框架分析 四张图每隔2秒自动从右向左轮播，该轮播图最外面有个框，框里面包含2部分，第1个部分里面有5张图，（第1张图和第5张图是相同的，即文件名相同）。第2部分里面有4个小点。第1部分和第2部分用无序列表来实现。 运行效果 8.6.2 框架对应html代码 1.“自动播放轮播图”框架嵌套步骤一， 大框对应html代码 外框 div id=box /div 2.“自动播放轮播图”框架嵌套步骤二， 加入2个无序列表后对应html代码 div id=box /div ul id=slide li/li li/li li/li li/li li/li /ul ul id=nav li class=red/li li/li li/li li/li /ul 8.6.2 框架对应html代码 img src=img/gz1.jpg/ img src=img/gz2.jpg/ img src=img/gz3.jpg/ img src=img/gz4.jpg/ img src=img/gz1.jpg/ 3.“自动播放轮播图”框架嵌套步骤三， 加入图片后对应html代码 div id=box ul id=slide li /li li /li li /li li /li li /li /ul ul id=nav li class=red/li li/li li/li li/li /ul /div 8.6.3 框架对应css样式分析 1.“自动播放轮播图”框架嵌套步骤一，大框对应css代码 外框 /*设置外框宽高为素材图片的宽高、溢出隐藏、相对定位 */ #box{ width:300px; height: 200px; overflow: hidden; position:relative; } 8.6.3 框架对应css样式分析 2.“自动播放轮播图”框架嵌套步骤二， 加入2个无序列表后css代码 /* 图片列表框：宽度为5张素材图片宽度，即300*5=1500px。高度为1张素材图片的高度200px。溢出隐藏，定位为绝对，顶上和左边位置都是0 */ #slide{ width:1500px; height: 200px; overflow: hidden;position: absolute; top:0;left: 0; } /* 列表项浮动朝左 */ #slide li{ float:left; } /*小圆点列表框：绝对定位，底下位置为5px，左边位置为50%。宽度为50px，高度为10px，左外边距为-25px，弹性布局，每个项目两侧的间隔相等*/ #nav{ position: absolute;bottom:5px;left:50%; width:50px; height:10px; margin-left:-25px;display: flex;justify-content: space-around; } /* 小圆点列表项宽高都为10px、设置背景色、倒圆角 */ #nav li{ width:10px; height: 10px; background: #CCC;border-radius: 50%; } /* 类名为red元素设置红色背景 */ #nav .red{ background:red; } 8.6.3 框架对应css样式分析 3.“自动播放轮播图”框架嵌套步骤三， 加入图片对应的css样式 /*图片宽高与父级元素相同*/ #nav li img{ width:100%; height:100%; } 8.6.4 jQuery效果分析与编码 步骤1： 在html文件的head/head标签中引入jQuery文件、引入javascript代码、加载完html节点后执行下面代码， script src=js/jquery-3.4.1.min.js type=text/javascript charset=utf-8/script script type=text/javascript $(function(){ }) /script 8.6.4 jQuery效果分析与编码 步骤2： 定义num变量并赋值为0、设置定时器（每2秒执行一次nb函数）。 script src=js/