前端轮播图最简单实现（小白也能学会）_前端轮播图代码

作者：不正经 | 2024-06-01 01:46:46

踩

前端轮播图代码

轮播图大家肯定都不陌生，因为这是前端最为常见的一个功能，现在随着框架和一些插件的兴起，很少人会去原生的去写轮播图，所以今天带大家写一下原生的轮播图来熟悉一下

最为主要的就是得知道这张图片的宽度，因为每一次移动的距离就是这张图片的宽度，但是宽度我们不能给死，每一张图片的大小是不一样的，所以根据js的clientWidth来获取，这样不管图片是多大都能获得这张图片的大小，第一步的移动距离就完成了，核心部分也就完成了

然后就是选择的定时器，这里一定要用setInterval这个定时器，不能用setTimeout，主要原因就不细说了，大家应该是都很熟悉的。

最后就是轮播到最后一张图片的时候该如何回到第一张图片呢？这里是直接不带动画的跳转到第一张(一会在代码中体现出来)

下面就来看一下代码的实现过程：

首先是html结构文件，这个轮播图结构上不难:


<!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>Document</title>
    <link rel="stylesheet" href="轮播图.css">
    <script src="轮播图.js"></script>
</head>
<body>
    <footer class="slideshow">
        <ul>
            <li><a href="#"><img src="image/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="image/门.jpg" alt=""></a></li>
            <li><a href="#"><img src="image/灵压之旅.jpg" alt=""></a></li>
            <li><a href="#"><img src="image/2.png" alt=""></a></li>
            <li><a href="#"><img src="image/2.jpg" alt=""></a></li>
        </ul>
    </footer>
</body>
</html>

接下来就是css的样式，大家根据自己的喜好设置即可:


*{
    margin: 0;
    padding: 0;
}
ul li {
    list-style: none;
}
.slideshow{
    position: relative;
    width: 1400px;
    height: 600px;
    margin: 0 auto;
    overflow: hidden;
}
.slideshow ul{
    width: 600%;
    position: absolute;
    height: 600px;
    left: 0;
    top: 0;
    /* transition: all 0s; */
}
.slideshow ul li{
    float: left;
    width: 1400px;
    height: 600px;
}
.slideshow ul li a img{
    width: 1400px;
    height: 600px;
}

最后就是核心部分的js：


window.addEventListener("load", function () {
    var a = document.querySelector(".slideshow ul");
    // a.style.left="-1400px"
    // console.dir(a.children[0])
    console.log(a.children.length);
    var num = 0;
    var len = a.children[0].clientWidth;
    console.log(a.children[0].clientWidth);
     setInterval(function(){
        if(num==a.children.length){
            a.style.left="0px";
            a.style.transition="left 0s";
            num = 1;
        }else{
            a.style.left=-len*num+"px";
            a.style.transition="left 1s";
            num++;
        } 
      
    },1500);
})

希望大家学到东西

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