JS实现简单的图片轮播

- 日理万妓 2022-05-17 08:12 198阅读 0赞

看了很多大佬的博客，大佬们的博客写的都非常有水平，小菜鸡今天就用自己的理解方式，按照自己的思路整理一下学习笔记啦！！！

轮播、轮播自然就是轮流着播放啦！图片轮播简单来说就是给你几张图，按照一定的时间循环播放。我要说的也是这样种极其简单的图片播放。

**一、思路**

1.  整体布局，利用<div><img>将图片轮播的雏形展示出来。
2.  利用CSS样式表，给雏形“化个妆”。
3.  利用JS用让图片动起来。利用setInterval，循环给照片加上样式，即隐藏和展示的样式。

**二、技术**

很多大佬的博客中写了一堆的技术点，如果不写几个技术点着实对不起这第一篇博客！我仔细思索了一下，还是决定决定对不起这篇博客了。（因为我感觉技术两个字太高深，我用的是获取元素即定时器等知识点，对，知识点比较合适！）

**三、代码实现**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style type="text/css">
    	h1{
    		text-align: center;
    	}
    	div{
    		width:500px;
    		height:500px;
    		margin: auto;
    		top:0;
    		right:0;
    		bottom:0;
    		left:0;
    	}
    	img{
    		width:100%;
    		height:100%;
    	}
    	.show{
    		display:block;
    	}
    	.hide{
    		display:none;
    	}
    	
    </style>
    </head>
    <body>
    	
    	<h1>图片轮播</h1>
    	<div id="imgs">
    		<img class="show" src="../imges/1.jpg">
    		<img class="hide" src="../imges/2.jpg">
    		<img class="hide" src="../imges/3.jpg">
    		<img class="hide" src="../imges/4.jpg">
    	</div>
    	
    </body>
    <script type="text/javascript">
    var imges = document.getElementsByTagName("img");
    console.log(imges);
    var len = imges.length;
    console.log(len);
    var i=0
    var timer = setInterval(function() {
    		imges[i].className = "hide";
    		if(i!=3){
    			i = i+1;
    			imges[i].className = "show";
    		}else{
    			i=0;
    			imges[i].className = "show"
    		}
    }, 1500);
    </script>
    </html>

四 解释说明

js逻辑代码解释：

var imges = document.getElementsByTagName("img");
    var i=0

获取需要操作的元素。

利用定时器，每隔1.5s循环将show和hide的类名加给不同的图片。类名的样式在头css中已经定义。