相关推荐recommended
前端轮播图最简单实现(小白也能学会)
作者:mmseoamin日期:2023-11-30

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

前端轮播图最简单实现(小白也能学会),第1张

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

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

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

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

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




    
    
    
    Document
    
    


    
  • 前端轮播图最简单实现(小白也能学会),第2张
  • 前端轮播图最简单实现(小白也能学会),第3张
  • 前端轮播图最简单实现(小白也能学会),第4张
  • 前端轮播图最简单实现(小白也能学会),第5张
  • 前端轮播图最简单实现(小白也能学会),第2张

接下来就是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);
})

希望大家学到东西