当前位置:   article > 正文

动态轮播图(html+css+js实现)

动态轮播图


本人使用js+css+html实现了一个动态轮播图,打算写个博文记录一下,下面我会放上:作品视频效果+思路讲解+知识点讲解+如何获取

作品视频效果:

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
推荐阅读
相关标签
  

闽ICP备14008679号