小谈算法

如下图是在移动端最常见的滑动banner.

问题是：3张图片，当如图2，滑动到第三张，继续向左滑动，如何重新回到第一张，从而实现反复循环的滚动。

1.png

2.png

思考后，问题变为如何取到下一张图片

算法1：
//伪代码
imgs= [1.png,2.png,3.png]
for(i=0;i

next = MAX % 3 //取余数，3是图片数据的长度imgs.length

}

算出来的next就是下一张图片的索引。

还能想到什么算法呢？ 仔细想想，这个和我们常用的一个数据结构非常像，什么呢？

队列，没错就是Queue

算法2：

function Queue(){
        this.dataStore = [];
        this.enqueue = enqueue;
        this.dequeue = dequeue;
        this.front = front;
        this.back = back;
        this.toString = toString;
        this.empty = empty;
}

//入队，就是在数组的末尾添加一个元素
function enqueue(element){
    this.dataStore.push(element);
}
//出队，就是删除数组的第一个元素
function dequeue(){
    return this.dataStore.shift();
}
//取出数组的第一个元素
function front(){
    return this.dataStore[0];
}
//取出数组的最后一个元素
function back(){
    return this.dataStore[this.dataStore.length-1];
}

function toString(){
    var retStr = "";
    for (var i=0; i

这样通过队列先进先出的特性，反复的出队，进队。因为出队是从队头出，而入队都是从队尾进。因此自然也就是形成不断循环的效果。

关于对列实现的代码，参考https://www.cnblogs.com/tylerdonet/p/5837730.html
作者还在文中提了基于队列做排序的算法，也是不错的选择。