小白都能理解的轮播图原理及源代码，并纠正一个轮播图误区，模仿的样式是小米官网的，但是轮播图的原理相同（还没写完）

 轮播图， 

          应该是前端小白上手写代码后最头疼的一块了，反正我当时是从网上搜了好多博客以及bilibili视频，但要么是看不明白，要么是代码根本不能实现，反正当时发愁了很久，废话不多说了，我们开始吧！

纠正误区，

             搜轮播图代码的时候发现，很多人都会讲的一个问题，就是克隆首图放在尾部，克隆尾图放在首部，这么做是为了避免最后一张图到第一张图出现空白的问题，但是我发现不必这么做也不会出现空白的问题（也可能是考虑不周全，欢迎评论指正，嘻嘻）

第一，

           我们先看下小米官网的轮播图长什么样子，（先不管侧边导航栏）

1、鼠标悬停到左右切换的小尖尖上会有背景颜色变化

2、点击小尖尖会切换图片，同时右下角小圆圈也会切换到对应位置

第二

         是搭建出轮播图整体框架，把五张图片放上去，还有五个小圆点

<div class="content">
	<div class="play">
		<!--五张轮播图片-->
		<div class="wrap" style="left:0px;">
			
			<img src="img/img1.jpg" alt="1">
			<img src="img/img2.jpg" alt="2">
			<img src="img/img3.jpg" alt="3">
			<img src="img/img4.jpg" alt="4">
			<img src="img/img5.jpg" alt="5">
		
		</div>
		<!--下角小圆点-->
		<div class="buttons">
			<span class="on">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
		</div>
        <!--为轮播图添加左右箭头-->
	<a href="javascript:;" rel="external nofollow" id="arrow" class="arrow_left">&lt</a>
	<a href="javascript:;" rel="external nofollow" id="arrow" class="arrow_right">&gt</a>
	</div>
</div>

这些代码之后是五张图片从上到下排列，这我就不贴图了

第三

        我们写出CSS样式

1、设置所有图片的大小，并设置浮动到左边

div.play div.wrap img{
    width:1226px;
    height:460px;
    float:left;
}

2、设置容器的大小，并设置超出部分hidden，并设置position为relative，定位容器位置，已有如图雏形

.play{
	width:1226px;
	height:460px;
	overflow:hidden;
	position:relative;
	margin:100px auto 0 auto;
	overflow:hidden;
}

3、设置左右箭头位置和颜色，还有鼠标悬停时

div.play a#arrow{
	position:absolute;
	text-decoration:none;
	top:40%;
	color:#d5d2d1;
	font-size:50px;
	z-index:2;
	height:69px;
	width:41px;
}

4、设置鼠标悬停时，箭头颜色，背景颜色和透明度

div.play a#arrow:hover{
	background-color:#757575;
	color:#dcd9d5;
	opacity:0.6;
}

5、设置左右箭头的圆角边框，让他好看点

.play .arrow_right{
	right:0px;
	border-top-left-radius:2.5px;	
	border-bottom-left-radius:2.5px;	
}
.play .arrow_left{
	border-top-right-radius:2.5px;	
	border-bottom-right-radius:2.5px;
}

6、设置右下角的小圆点

.play .buttons{
	position:absolute;
	width:200px;
	height:18px;	
	right:30px;
	bottom:20px;
	text-align:right;
	z-index:3;
}
.play .buttons span{
	margin:0 5px;
	border:2px solid #fff;
    border-color:rgba(255,255,255,0.3);
    border-radius:10px;
	display:inline-block;
	width:6px;
	height:6px;
	background-color:rgb(211,212,211);
	color:white;
	cursor:pointer;
}
.play .buttons span.on{
	background-color:rgb(151,150,150);
}

好啦。现在看一下，已经有了雏形，但还不能图片还不能来回切换，等下加上JS代码就可以了

第四

        加上JS代码

1、滴滴滴滴