JS原生轮播-基础篇（HTML+CSS）部分

根据慕课网的轮播教程，今早也写了一个，主要是把思路捋清楚，下面的代码我尽全力把每一行解释清楚，
我也是根据我今早写的思路一步一步来，希望能帮到读者！
那么就从最基础的HTML和CSS开始写

<div id="contain">
<ul id="contain_imgs" style="left:-1024px;">
<li><img src="haizei4.jpg"/></li>
<li><img src="haizei1.jpg"/></li>
<li><img src="haizei2.jpg"/></li>
<li><img src="haizei3.jpg"/></li>
<li><img src="haizei4.jpg"/></li>
<li><img src="haizei1.jpg"/></li>
</ul>
<a href="javascript:;" id="prev" class="arrow">&lt;</a>//左箭头
<a href="javascript:;" id="next" class="arrow">&gt;</a>//右箭头
<div id="link">//这几个是下面的按钮，点击那个就会切换到哪个图片
<span class="on"></span>
<span></span>
<span></span>
<span></span>
</div>  
</div>

CSS

#contain_imgs{
margin: 0 auto;
padding: 0px;
}
#contain{
margin: 0 auto;
width: 1024px;
height: 575px;
position: relative;//核心代码，因为我们需要绝对定位，先把父元素设为相对定位
overflow: hidden;//其他的隐藏起来
}
#contain_imgs{
position: absolute;//绝对定位，这样我们就可以定位left值，做到改变left的值可以切换图片
top: 0px;
width: 6144px;
height: 576px;
list-style: none;
z-index: 1;
}
#contain_imgs li{
width: 1024px;
height: 575px;
float: left;
}
#prev { 
left: 20px;
}
#next {
right: 20px;
}
.arrow { 
cursor: pointer;
display: none;
line-height: 100px; 
text-align: center; 
font-size: 100px; 
font-weight: bold; 
width: 100px; 
height: 100px;  
position: absolute; 
z-index: 2; //避免遮盖
top: 220px; 
background-color: RGBA(0,0,0,.3); 
color: #fff;
text-decoration: none;
}
.arrow:hover { 
background-color: RGBA(0,0,0,.7);//最后的数是用来调整透明度
}
#contain:hover .arrow { 
display: block;
}
#link{position: absolute;
left:390px;
bottom: 10px;
z-index: 2;

}

#link span{
margin: 0 10px;
cursor: pointer; 
float: left;
border: 1px white solid; 
width: 20px;
height: 20px;
border-radius: 50%;//做成圆形按钮
background-color: black;
}
#link .on{
background-color: red;//当我们切换按钮时用到的
}

在这里为了更清楚，请原谅我盗几张图

这就是我们写完CSS的样式，在蓝色背景之后的都被隐藏了，也就是之后的picture2，3，4
这就是hidden的作用，我们通过调整left的值，我的代码图片是1024px宽，我也就是我如果定位到
left=-1024px 那就回变为第二张图，但我的源码之所以从-1024px开始，因为要实现循环滚动效果
这里比较简单，下一篇我在写JS的部分