游戏中实现轮播图效果

轮播图

轮播图实现原理不复杂，方法千万种，本文主要介绍两种借助引擎库来快速实现方式。

一、laya（v1.0）

使用list组件，循环更新列表数据array，原理是每次更新偏移量后，将array首个数据元素移动到尾部，视觉上是首尾循环相连。

核心部分：

    var self = this;
    self._dataList = [1, 2, 3, 4, 5];
    self.list.array = self._dataList;

    var cb = function ()
    {
        var temp = [];
        for (var i = 1; i < self._dataList.length; i++)
        { temp.push(self._dataList[i]); }
        temp.push(self._dataList[0]);
        self._dataList = temp ;
        self.list.scrollTo(0);
        self.list.array = self._dataList;
    };

    self._timer = setInterval(() => {
       self.list.tweenTo(1, 200, Laya.Handler.create(self, cb, []));
    }, 3000);

二、FairyGUI

编辑器确实很好用，做轮播非常简单，同样借助list组件，只需要两步：

1. 设置列表首尾部循环

    list.setVirtualAndLoop();

2. 循环更新偏移量即可

    let timer = setInterval(() => {
        list.scrollPane.scrollRight(1, true);
    }, 3000);

By Pury.