不知不觉已到了八月，不知道说什么，冲冲冲！

原生的js小模块可写的还有很多，先从轮播图开始吧

在首次尝试抄写刘彦佐前辈博客中的Js轮播图后，大致了解了 HTML与 CSS的流程，
也通过博客中的JS部分学习了几个重要的api（或者叫函数function），列如
setTimeOut(),clearTimeOut(),setInterval(),clearInterval(),
parseInt()….
这是第二次练习轮播图，在改变偏移值实现轮播的基础上再加上一些自己的东西，
也希望自己尽量少的查看源码来实现，当然，第二次肯定还是会有细节出现遗漏的
情况，只是希望能少些。
这个轮播图代码刘彦佐前辈本人是这样说的

讲的是用面向过程函数式编程去实现，相对于面向对象设计模式，代码难免会显得臃肿冗余。但没有面向对象的抽象却很适合新手理解与学习

这句话我也能大概通过另一个轮播图实现感觉到，希望在后面的学习实践中更加理性的认识和理解这句话。

感谢刘彦佐前辈的分享
写完我觉得有必要加上过渡，虽然我还不会,最后的”闭包”环节也有待理解
该轮播图原理如下

正题↓

HTML部分

1.先使用一个母盒container
2.图片盒list->imgx( x为pictures数目 )
3.按钮盒buttons->spany( y为具体buttons数目 )
4.箭头盒arrow 左右两个
5.list的left属性是轮播的关键，它的偏移值(value)会让container盒子里的img发生变化，从而实现切换
6.buttons里的span带有的类名为”on”的属性,是让按钮随着轮播进行变换的关键

<div class="container" id="container">
    <div class="list" id="list" style="left: 0px">
        <img src="img/1.jpg" alt="1">
        <img src="img/2.jpg" alt="2">
        <img src="img/3.jpg" alt="3">
        <img src="img/4.jpg" alt="4">
        <img src="img/5.jpg" alt="5">
    </div>
    <div class="buttons" id="buttons">
        <span index = "1" class= "on"></span>
        <span index = "2";></span>
        <span index = "3";></span>
        <span index = "4";></span>
        <span index = "5";></span>    
    </div>
    <a href="javascript:;" class="arrow" id="prev">&lt;</a>
    <a href="javascript:;" class="arrow" id="next">&gt;</a>
 </div>

CSS部分

1.建立初始化CSS
2.主盒子container的宽高取决于你要选取的大小
3.为了使list的核心属性left能够生效，需要给list添加绝对定位,自然父元素container也需要添加相对定位*
4.当list受到container定位关系的管制后，我们还需要为container添加超出隐藏
5.从轮播图的设计来看，箭头arrow和button按钮都应该在图的上方，因为我们需要点击它们来对图进行操作，
所以 list(z-index:1) arrow(z-index:2) buttons(z-index:2)
6.因list已添加了绝对定位和层级，所以后续的标签想要显现出来不仅需要z-index，还需要进行脱离文档流的设置
(脱离文档流采用浮动和定位皆可)
7.介于是练习阶段并没有专业的UI设计，关于按钮span和arrow箭头的设计取决于开发者的个人审美水平和取向，应
多加涉及和思考&尝试
8.箭头的设计理念为鼠标放在轮播区域即显示，放在轮播区外即隐藏,so……u know how to deal with this!

*{
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
}
.container{
    position: relative;
    width: 1000px;
    height: 400px;
    margin: 100px auto 0 auto;
    border: 2px solid #000;
    overflow: hidden;
}

.list{
    position: absolute;
    width: 5000px;
    height: 400px;
    z-index: 1;
    }
.list img{
    width: 1000px;
    height: 400px;
    float: left;
    }

.buttons{
    z-index: 2;
    position: absolute;
    width: 300px;
    height: 50px;
    bottom: 0;
    left: 346px;
}

.buttons span{
    float: left;
    width: 40px;
    height: 30px;
    margin-left: 14px;
    background-color: #000;
    border-radius: 50%; 
    border: 1px solid #fff;
    cursor: pointer;
}

.buttons .on{
    background-color: orangered;
}

.arrow{
    display: none;
    z-index: 2;
    position: absolute;
    width: 80px;
    height: 80px;
    font-size: 105px;
    font-weight: bold;
    text-align: center;
    line-height: 65px;
    top: 160px;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
}

.arrow:hover{
    background: rgba(0, 0, 0, 0.7);
}

.container:hover .arrow{
    display: block;
}
#next{
    right: 0;
}

到这里该轮播图的页面部分已完成，接下来重点练习环节

JS部分

1.由于抓取dom元素在编写Js中非常频繁，所以我们将document.getElementById()进行封装

/*封装函数 */
function ById(id){
    return typeof(id)? document.getElementById(id):'id';
}
function ByTagName(tagName){
    return typeof(tagName)? document.getElementsByTagName(tagName):'tagName'
}

2.抓取DOM元素

var container = ById('container'),
    list = ById('list'),
    prev = ById('prev'),
    next = ById('next'),
    timer, //后续会用到
    index = 1;//后续会用到
var buttons = ByTagName('span');

3.进行左右箭头切换图片的功能编写

1)这里parseInt()获取的值是一个整数,而list.style.left获取的是相对于左边的距离
2)style.left获取的是字符串，需要用parseInt()取整转化为数字
3)不要想当然的认为prev向前一张图就添加负数，next同理.增加偏移值是作用在list上
4)绑定左右箭头事件

/* 偏移值变换*/
function mov(value){
    var newLeft = parseInt(list.style.left) + value;
    list.style.left = newLeft + 'px';
}
    prev.onclick = function(){
    mov(1000);
    }
    next.onclick = function(){
    mov(-1000);
       }

4.first与last的回滚

1)在这段代码中,偏移值小于-4000图片就会出现空白,大于0也是,因为我们需要做一个简单的判断
2)但要注意，这个判断是要放在 mov函数里面的，逻辑问题**

if(newLeft<-4000){
    list.style.left = 0 + 'px';
}    
    if(newLeft>0){
    list.style.left = -4000 + 'px';
}

5.自动轮播函数

1)利用库函数定时器构建自动轮播,

function play(){
timer = setInterval(function(){
 next.onclick()
 },2000)
}
play();

6.清除轮播

1)clearInterval()方法的参数必须是由setInterval()返回的ID值**

function stop(){
    clearInterval(timer);
}
container.onmouseover = stop;
container.onmouseout = play;

7.圆点响应

1)buttonsShow函数让每次更换图片下面的圆点都会全部变黑，然后通过index的值让特定的圆点变色，顺序搞清楚很重要
2) buttons[index-1].className = ‘on’; 这段代码写在for循环里也可以，外面也可以.不影响功能，但里面却影响了性能

function buttonsShow(){
    for(var i = 0;i< buttons.length;i++){
        if(buttons[i].className = 'on'){
            buttons[i].className = '';    
        }
    }buttons[index-1].className = 'on';
}

3)由于引入了圆点，index. prev和next的箭头事件需要增加内容，分别改为:

prev.onclick = function(){
    index -=1;
    if(index<1){        //圆点和图一样，first和last需要进行判断来达到回滚
        index = 5;
    }
    buttonsShow();
    mov(1000);
}
next.onclick = function(){
    index+=1;
    if(index>5){        //圆点和图一样，first和last需要进行判断来达到回滚
        index = 1;
    }
    buttonsShow();
    mov(-1000);
 }

到这里为止，我们已经完成了自动轮播，左右箭头播放。圆点虽然能够能够根据图片的变换进行响应变色，但圆点本身还是不能进行点击选取播放。下面的代码就完成了该功能。

8.这里使用了闭包，我暂时还没有搞太清楚。

    for (var i = 0; i < buttons.length; i++) {
    // 这里使用的是立即执行函数，
    (function(i) {
        buttons[i].onclick = function() {
            var clickIndex = parseInt(this.getAttribute('index'));
            console.log(clickIndex);

            var value = 1000 * (index - clickIndex); 
            mov(value);
            index = clickIndex;
            buttonsShow();
        }
    })(i)
}

大功告成，一个完整的轮播图就这样完成了。我知道这不短，但是按照步骤一点点编写，一边写一遍思考。一遍不行就两遍，两遍不行就三遍。它迟早是你的。

最后

如果觉得分离开的代码不够，在我的github上有完整代码GITHUB
喜欢的话，给个star吧！