赞
踩
js+html+css实现动态轮播图 - Google Chrome 2021-10-22 20-02-35
首先是html+js部分,我就直接将代码放上来了:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态轮播图</title> <link rel="stylesheet" href="../css.css/reset.css"> <link rel="stylesheet" href="../css.css/style.css"> <script> // 页面的样式大概已经设置好了,如何实现前后移动的功能 // 我的思路是将:第一个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); } } </script> </head> <body> <!-- 最近学了js的dom相关知识,打算做一个动态轮播图巩固一下所学的知识 --> <!-- 我的思路就是:先使用html和css做出相应的静态界面然后再使用js实现动态功能 --> <div class="container"> <!-- 轮播图的主要部分 --> <ul class="lb"> <li><img src="./1.jpeg" alt="图片"></li> <li><img src="./2.jpeg" alt="图片"></li> <li><img src="./3.jpeg" alt="图片"></li> <li><img src="./4.jpeg" alt="图片"></li> <li><img src="./5.jpeg" alt="图片"></li> </ul> <!-- 加上向左移的按钮 --> <div class="pre"> <a href="#"> <img src="../img/大图左切换箭头.png" alt="图片"> </a> </div> <!-- 加上向右移的按钮 --> <div class="next"> <a href="#"> <img src="../img/大图右切换箭头.png" alt=""> </a> </div> </div> </body> </html>
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 © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。