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

作者：盐析白兔 | 2024-07-09 22:12:16

踩

动态轮播图

作品视频效果：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

思路讲解的话：
如何构建这个轮播图的思路：首先我本人的话是习惯于先使用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()：在父节点的某个孩子节点前插入节点

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/803857

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

目录：

作品视频效果：

思路讲解：

知识点讲解：