JavaScript 循环滚动的代码示例

/**
* 滚动容器类，提供滚动呈现容器内滚动条目的功能。
* @param initStatus 类型为ScrollContainer.Status，它给出初始设定
*/
ScrollContainer = function(initStatus){
    this.status = initStatus ? initStatus : new ScrollContainer.Status();
    this.styleBackup = {};
    this.attributeBackup = {};
    /**
     * 开始滚动，首先进行一些初始化功能
     * Edit www.jb200.com
     */
    this.startScroll = function(){
        var status = this.status;
        var container = status.container;
        // 备份 属性
        this.attributeBackup["onmouseover"] = container.onmouseover;
        this.attributeBackup["onmouseout"] = container.onmouseout;
        // 重新设定属性
        container.onmouseover = function(){status.isMouseOver = true;};
        container.onmouseout = function(){status.isMouseOver = false;};
        // 备份 style
        this.styleBackup["width"] = container.style.width;
        this.styleBackup["height"] = container.style.height;
        this.styleBackup["overflow"] = container.style.overflow;
        // 重新设定 style
        container.style.width = status.itemWidth;
        container.style.height = status.itemHeight;
        container.style.overflow = "hidden";
        // clone 第一个 Item
        var clonedFirstItem = status.items[0].cloneNode(true);
        status.items.push(clonedFirstItem);
        if (status.scrollVertical){
            container.appendChild(clonedFirstItem);
        } else {
            status.subContainer.style.width = status.itemWidth * (status.items.length + 1);
            status.subContainer.appendChild(clonedFirstItem);
        }
        // 启动滚动
        if (this.timerHandler == 0){
            this.timerHandler = setInterval(this.doScroll, this.status.interval);
        }
    };
    /**
     * 停止到某个滚动条目上，index 从 0 开始。
     */
    this.stopScrollAt = function(index){// index 从 0 开始
        index = index % (this.status.items.length -1);
        this.status.isStoped = true;
        if (this.status.scrollVertical){
            this.status.container.scrollTop = index * this.status.itemHeight;
        } else {
            this.status.container.scrollLeft = index * this.status.itemWidth;
        }
    };
    /**
     * 继续滚动，起作用与 stopScrollAt 函数调用之后用。
     */
    this.goOnScroll = function(){
        this.status.isStoped = false;
    };
    /**
     * 清除滚动，并将滚动容器状态复位。
     */
    this.clear = function(){
        var status = this.status;
        // 清除滚动
        clearInterval(this.timerHandler);
        this.timerHandler = 0;
        // 删除最后的那个 clone 的 Item
        if (status.scrollVertical){
            status.container.removeChild(status.container.lastChild);
        } else {
            status.subContainer.style.width = (status.items.length -1) * status.itemWidth;
            status.subContainer.removeChild(status.subContainer.lastChild);
        }
        // 恢复 style 设置
        for (var key in this.styleBackup){
            status.container.style[key] = this.styleBackup[key];
        }
        // 恢复属性
        for (var key in this.attributeBackup){
            status.container[key] = this.attributeBackup[key];
        }
    };
    this.timerHandler = 0;
    var status = this.status;
    /**
     * 该函数由计时器调用，用于更新滚动界面。
     */
    this.doScroll = function(){
        // 鼠标悬停中或停止中
        if (status.isMouseOver || status.isStoped){
            return;
        }
        // 暂停显示某个Item中
        if (status.isPaused){
            // 暂停时间 ++
            status.pausedTime += status.interval;
            // 未超时就返回
            if (status.pausedTime = (status.items.length - 1)
                        * status.itemHeight){
                    // 若到达最后则重新开始
                    status.container.scrollTop = 0;
                }
                status.isPaused = true;
            }
        } else {
            status.container.scrollLeft ++;
            if ((status.container.scrollLeft % status.itemWidth) == 0){
                // 要继续滚动时，先检测是否已经到了位于最后的clone的第一个Item
                if (status.container.scrollLeft >= (status.items.length - 1)
                        * status.itemWidth){
                    // 若到达最后则重新开始
                    status.container.scrollLeft = 0;
                }
                status.isPaused = true;
            }
        }
    }
};
/**
* 用于设定滚动容器的一些初始值，在滚动过程中也将一些其他状态变量保存于此。
* @param container 包含滚动条目的容器的ID字符串
* @param itemWidth 滚动单个条目的宽度，水平滚动时用到
* @param itemHeight 滚动单个条目的高度，垂直滚动时用到
* @param pauseTimeout 滚动到单个条目上时，停顿的时间，单位：毫秒
* @param interval 多长时间滚动一个像素，单位：毫秒
* @param scrollVertical 指明是垂直滚动还是水平滚动，true - 垂直滚动
*/
ScrollContainer.Status = function(container, itemWidth,
                itemHeight, pauseTimeout, interval, scrollVertical){
    this.container = document.getElementById(container);
    this.itemWidth = itemWidth;
    this.itemHeight = itemHeight;
    this.pauseTimeout = pauseTimeout && pauseTimeout > 20
                            ? pauseTimeout : 1000;//???
    this.interval = interval;
    this.scrollVertical = scrollVertical;
    this.items = [];
    this.subContainer;  //只有在 scrollVertical 为 false，即水平滚动时才有值
    if (scrollVertical){
        for (var i=0; i
/**/
*{margin:0;padding:0;}
#test1 {background:#FF6600;}
#test1 li{line-height:25px;}
#test2 {background:#FF88C2;}
#test2 div{line-height:30px;}
#test3 {background: #FF88C2; }
#test3_s {width: 800px; background: #FFF0F5;}
#test3_s span{width: 200px; line-height:50px;}