简易图片轮播的JS实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40949537/article/details/81516256

本文通过简单易懂的方式，介绍了如何使用JavaScript实现图片轮播功能。作者首先阐述了轮播的基本思路，包括整体布局、CSS美化和JS驱动图片切换。接着，提到技术点主要是获取元素和设置定时器。最后，提供了代码实现并做了详细解释，通过定时器每隔1.5秒切换显示的图片。

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

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

一、思路

整体布局，利用<div><img>将图片轮播的雏形展示出来。
利用CSS样式表，给雏形“化个妆”。
利用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>
	<!-- 
		1.在页面上添加一组图片默认

JS实现简单的图片轮播