前端轮播图最简单实现（小白也能学会）-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端轮播图最简单实现（小白也能学会）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

csdn 轮播图,前端,javascript,开发语言,html

最为主要的就是得知道这张图片的宽度，因为每一次移动的距离就是这张图片的宽度，但是宽度我们不能给死，每一张图片的大小是不一样的，所以根据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);
})

希望大家学到东西文章来源地址https://www.toymoban.com/news/detail-756183.html

到了这里，关于前端轮播图最简单实现（小白也能学会）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！