什么是轮播图
轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片 。这些图片统称为轮播图，这个模块叫做轮播模块 。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面 。下图截自京东的购物页面 。
虽然现在轮播图的主流做法是用来实现，但是轮播图是js学习里面很经典的案例之一，了解和学习轮播图的原理和实现，对于js的代码理解有很大的帮助 。
题目要求
html代码
第三题-无缝轮播
文章插图
文章插图
文章插图
文章插图
文章插图
css代码
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dd,dl{margin:0;padding:0;}ul,ol{list-style:none;}img{display:block;}.clear:after{content:"";display:block;clear:both;}.banner{position:relative;width:100%;overflow:hidden;}.banner ul{position:relative;width:500%;}.banner ul li{width:20%;float:left;}.banner ul li img{width:100%;}#left,#right{position:absolute;top:50%;margin-top:-25px;width: 50px;height:50px;cursor:pointer;background-color: rgba(0,0,0,0.4);}.s1 {position: absolute;top:12px;right: 12px;display: block;width: 20px;height:20px;border-top:4px solid white;border-right:4px solid white;transform: rotate(-135deg);}.s2{position: absolute;top:12px;right: 12px;display: block;width: 20px;height:20px;border-top:4px solid white;border-right:4px solid white;transform: rotate(45deg);}#left{left:0;}#right{right:0;}#left:hover,#right:hover{background-color: rgba(0,0,0,0.8);}#pageNav{position: absolute;bottom:20px;left:50%;transform:translateX(-50%);}#pageNav a{display:inline-block;margin:0 5px;width:15px;height:15px;background-color: #fff;border-radius:50%;}#pageNav a.cur{background-color: orange;}
js代码
// 获取元素//（1）根据标签获取元素var banner=document.getElementById("banner"),// ul=banner.____(1)______("ul")[0],ul=banner.getElementsByTagName("ul")[0],// li=ul.____(1)______("li"),li=ul.getElementsByTagName("li"),leftBtn=document.getElementById("left"),rightBtn=document.getElementById("right"),pageNav=document.getElementById("pageNav"),index=0,timer=null,animate=false;// 追加小圆点for(var i=0;i
题目解析
第一题 根据标签获取元素可以知道使用() 方法
() 方法可返回带有指定标签名的对象的集合 。
第二题 创建元素用() 方法，不要漏了
() 方法通过指定名称创建一个元素
第三题 设置类名直接用()
属性设置或返回元素的 class 属性 。
第四题 追加节点用() 或()都可以
- 【JavaWeb】Java三层架构写一个登录案例
- 前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并
- Javaweb的基础知识及非商业版的JavaIDE的安装
- 一 HTML：开发工具
- 二 JavaWeb——Servlet入门
- 二 零基础学习WEB前端开发：HTML标签及开发工具
- 【HTML】前端网页开发工具Vscode中DOCTYPE和lang以及字符集的作
- rabbitmq Web页面访问配置
- web课程设计——手机销售网
- 三、Web 前后端分离的意义大吗？