动态轮播图（html+css+js实现）

最新推荐文章于 2024-05-20 11:56:24 发布

品风 ₯ 未醉

最新推荐文章于 2024-05-20 11:56:24 发布

阅读量3.3k

点赞数 9

分类专栏： js+html+css的小练习文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_48342617/article/details/120912704

版权

js+html+css的小练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

作品视频效果：

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()：在父节点的某个孩子节点前插入节点

品风 ₯ 未醉

关注

9
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
动态轮播图（html+css+js实现）

目录：作品视频效果：思路讲解：知识点讲解：本人使用js+css+html实现了一个动态轮播图，打算写个博文记录一下，下面我会放上：作品视频效果+思路讲解+知识点讲解+如何获取作品视频效果： js+html+css实现动态轮播图 - Google Chrome 2021-10-22 20-02-35 思路讲解：首先是html+js部分,我就直接将代码放上来了：<!DOCTYP
复制链接

扫一扫