动态轮播图（html+css+js实现） |
您所在的位置：网站首页 › 用css代码实现轮播图 › 动态轮播图（html+css+js实现） |
|
目录：
作品视频效果：思路讲解：知识点讲解：
本人使用js+css+html实现了一个动态轮播图，打算写个博文记录一下，下面我会放上：作品视频效果+思路讲解+知识点讲解+如何获取
作品视频效果：
js+html+css实现动态轮播图 - Google Chrome 2021-10-22 20-02-35 思路讲解：首先是html+js部分,我就直接将代码放上来了： 动态轮播图 // 页面的样式大概已经设置好了，如何实现前后移动的功能 // 我的思路是将：第一个li不断删除插入从而达到改变顺序的目的 window.onload=function(){ // 首先尝试一下能否为两个div捆绑事件 // 获取div对象 // 两个按钮的功能已经实现看看能否实现自动轮播的功能 // 看了看别的人的视屏直接设置一个函数，然后定时轮播即可 let timmer=setInterval(zd,3000); function zd(){ let fristli=document.querySelectorAll(".container .lb li")[0]; // 获取所有li的父节点，方便进行删除插入操作 let father=document.querySelector(".container .lb"); // 将第一个li删除 let temp =father.removeChild(fristli); // 再将temp插入到li列表的最后 father.appendChild(temp); } // 先设置往下按的按钮 let next=document.querySelector(".container .next a"); next.onclick=function(){ // alert("后一页");测试完毕有效 //获取第一个li let fristli=document.querySelectorAll(".container .lb li")[0]; // 获取所有li的父节点，方便进行删除插入操作 let father=document.querySelector(".container .lb"); // 将第一个li删除 let temp =father.removeChild(fristli); // 再将temp插入到li列表的最后 father.appendChild(temp); } // 同样往前移的思路与上面的相反是删除最后一个然后将 // 先设置往前按的按钮 let pre=document.querySelector(".container .pre a"); pre.onclick=function(){ // alert("前一页");测试完毕有效 //获取最后一个li let lastli=document.querySelectorAll(".container .lb li")[4]; // 获取所有li的父节点，方便进行删除插入操作 let father=document.querySelector(".container .lb"); // 将最后一个li删除 let temp =father.removeChild(lastli); // 再将temp插入到li列表的最前面 father.insertBefore(temp,father.firstChild); } }css部分： /* 将整个页面设置为粉色 */ body{ background-color: pink; } /* 首先设置container在页面中居中 */ .container{ width: 800px; margin: 200px auto; position: relative; } /* 设置所有图片的大小 */ .container .lb li img{ width: 400px; height: 200px; /* 设置圆角 */ border-style: solid; border-width: 3px; border-color: purple; border-radius: 15px; } .container .lb li{ /* 将所有的图片绝对定位 */ position: absolute; } /* 调整好各个图片的位置 */ .container .lb li:nth-child(0){ left: 0px; } .container .lb li:nth-child(1){ top: -50px; left: 150px; z-index: 100; } /* 重新调整好中间这一张图片的大小 */ .container .lb li:nth-child(1) img{ width: 500px; height: 300px; } .container .lb li:nth-child(2){ left: 400px; } /* 调整好两个按钮的样式 */ .container .pre{ position: absolute; width: 50px; height: 100px; top: 50px; left: -25px; } .container .next{ position: absolute; width: 50px; height: 100px; top: 50px; right: -25px; } /* 设置箭头的大小 */ .container .pre a img{ width: 50px; height: 100px; } .container .next a img{ width: 50px; height: 100px; }思路讲解的话： 如何构建这个轮播图的思路：首先我本人的话是习惯于先使用css和html实现静态页面，然后再使用js实现动态效果，我看了一些视频一些大神是直接使用js完成的，不过我目前还不熟练所以先做静态页面，本人也推荐大家先从静态界面入手； js实现自动轮播的思路：首先其实代码中是有5张图片的，我使用5个li,然后定位显示前3张图片，有两张图片其实是被覆盖了，如何实现轮播：因为我固定显示前三个li,所以要实现轮播效果只需要把li的顺序形成一个循环即可，那么思路有两种，这两种思路也是哪两个箭头的功能： （1）将最后一个插入到第一个li之前 （2）将第一个li放到最后一个li之后 然后结合一个定时函数即可实现轮播效果 知识点讲解：下面只会大致讲解多涉及的知识点，想深入了解还请自行查资料： html部分： 块盒居中：定宽+左右margin：auto即可 css部分： 伪类选择器：:nth-child(n) 这里就讲讲为什么使用这个孩子选择器，而不直接锁定某个li，这里是为了方便js切换li的样式，这里我们只需要改变n就可以将css样式应用到不同的上去 js部分： window.οnlοad=function():将js代码延迟到加载完页面再执行 定时器： let timmer=setInterval(zd,3000); 每隔一段时间执行一个zd代码 查询元素的方法：querySelector() querySelectorAll() 这两个方法可以按css选择器形成的字符串获取某个节点 其中querySelector() 是获取第一个，querySelectorAll() 是获取所有符合的节点 操纵节点的方法：appendChild() removeChild() insertBefore() appendChild():在孩子节点列表的最后插入一个节点 removeChild():根据参数移除某一节点 insertBefore()：在父节点的某个孩子节点前插入节点 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |