实现轮播图，仅需3步

野生切图仔

已于 2023-09-17 12:26:17 修改

阅读量1.3w

点赞数 17

分类专栏：趣学 CSS 文章标签： css javascript html

于 2020-12-10 22:20:02 首次发布

本文链接：https://blog.csdn.net/weixin_42232622/article/details/110980592

版权

趣学 CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

三步实现初级轮播图

首先我们来了解js来实现轮播图的原理

1、我们先写一个div设置它的宽度高度最好与图片大小一样；
2、在div中放上一定数量的图片；
3、由于图片会超出div盒子便会呈现以下效果；👇

在这里插入图片描述

4、我们在一定的时间调整第一张图片的位置;
5、下面的图片就会塌下来 ;
6、我们把超出div盒子的部分隐藏掉就实现了图片1到3…

在这里插入图片描述

Ⅱ、3步代码简单实现

① html部分

html 部分：我们设置一个div 里面写几张img图片。
为第一个图片设置一个id 或 class 我们下面要用到

<body>
    <div id="box">
        <img src="./图片素材/001.jpg" id="img1">
        <img src="./图片素材/002.jpg">
        <img src="./图片素材/003.jpg">
        <img src="./图片素材/004.jpg">
    </div>
</body>

👇

在这里插入图片描述

② css部分

设置外层box的样式，将超出的部分隐藏掉；👇

 #box {
   width:  420px; //单张图片宽度
   height: 230px; //单张图片高度
   border: 1px solid #000;
   overflow: hidden;    //超出隐藏
}

在这里插入图片描述

③ js部分

<script>
    const img1 = document.getElementById("img1");  
    let i = 0 ;
   
	//5行代码解最简单的轮播图
 	setInterval("lubo()",1000);  //定时器没过1000毫秒执行该函数一次  
    function lubo(){
     	img1.style.marginLeft=i+"px"; //修改css样式：图片距离box左边的距离   
    	i-=400;  //距离 减(向左)  1张图片宽度
    	if(i==-400*4){ i=0 }   //一共有4张图片，所以到4的时候回到最开始      
     }
   </script>