【轮播图(点击小点点让他跳转到具体某一张)】轮播图的原理前几篇说过一些 现在加上一些点点击让他轮播
文章图片
具体就是自己添加一个标签,获取之后知道他是哪一张进行显示就可以了。
下面是代码
- 锐客网 ul{
list-style: none;
}.item{
height: 200px;
width: 200px;
font-size: 20px;
text-align: center;
/* margin: auto auto;
*/
display: none;
transition: all .3s;
position: relative;
}
.item.show{
display:block ;
}
.item:nth-child(1){
background-color: red;
}
.item:nth-child(2){
background-color: rosybrown;
}
.item:nth-child(3){
background-color: royalblue;
}
.item:nth-child(4){
background-color:aquamarine ;
}
.item:nth-child(5){
background-color:indigo ;
}
.point-wrap{
display: flex;
position: absolute;
top: 0px;
left: 10px;
z-index: 200;
}
.point{
height: 30px;
width: 30px;
background-color: darkorange;
border-radius: 10px;
margin-right: 10px;
font-size: 12px;
line-height: 30px;
text-align: center;
}
- 0
- 1
- 2
- 3
- 4
推荐阅读
- JavaScript|JavaScript之DOM增删改查(重点)
- flex|C语言-使用goto语句从循环中跳出
- quill|Quill编辑器插入自定义HTML记录
- HTML基础
- HTML基本知识
- web前端笔记|web前端学习-第一天
- 百度网盘|教你优雅绕开百度网盘限速机制
- 数据可视化|几款免费在线甘特图工具
- HTML+Js实战项目|在网页中实现icon小图标的几种方法
- 如何修改网页小图标,浏览器页面上的图标。