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"><a>//左箭头
        <a href="javascript:;" id="next" class="arrow">>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的部分