5分钟学会初级轮播图

1.轮播图

①首先我们来了解js来实现轮播图的原理
1.我们先写一个div设置 它的宽度高度最好与图片大小一样。 2.在div中放上一定数量的图片。 3.由于图片会超出div盒子便会呈现以下效果。

5分钟学会初级轮播图_第1张图片

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

5分钟学会初级轮播图_第2张图片

②代码部分
1.html:我们设置一个div 里面写几张图片。 2.为第一个图片设置一个id我们下面要用到
	<body>
    <div id="box">
        <img src="./图片素材/001.jpg" alt="" id="img1">
        <img src="./图片素材/002.jpg" alt="">
        <img src="./图片素材/003.jpg" alt="">
        <img src="./图片素材/004.jpg" alt="">
    div>
body>

5分钟学会初级轮播图_第3张图片

2.我们用css样式将超出的部分隐藏掉

  #box{
     
       width:  420px;
       height: 230px;
       border: 1px solid #000;
       overflow: hidden;    //超出隐藏
    }

5分钟学会初级轮播图_第4张图片

3.js部分
设置一个定时器每过(1000毫秒)1秒执行一个函数。
这个函数来设置第一个图片的margin-left值

<script>
    var img1=document.getElementById("img1");  
    var 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>

这就完成简单的轮播图,效果就不给大家看了大家都懂的!!!!
5分钟学会初级轮播图_第5张图片

你可能感兴趣的:(笔记,css,javascript,html)