marquee.js

 

图片无缝滚动工具类

CreateTime--2018年3月7日17:11:03

Author:Marydon

/**
 * 图片无缝滚动
 * @description
 *     将要滚动的图片复制一份作为它的兄弟节点拼接到其身后，
 *    通过操作scrollTop和scrollLeft来调节滚动条的距离来实现    
 */
function Marquee() {
    var object = this;
    var container_father;
    var container_child;
    var container_clone;
    var scrolllDirection;
    var scrollSpeed;
    
    /**
     * 界面滚动参数设置
     * @param direction
     *     滚动方向-没有传参，默认向右滚动
     * @param speed
     *     滚动速度-没有传参，速度为50毫秒
     * @param id_father
     *     父（祖父）容器id
     * @param id_child
     *     子（子孙）容器id
     */
    this.init = function(direction, speed, id_father, id_child) {
        // 定义克隆容器id
        id_clone = "cloneContainer";
        // 对子容器进行克隆并拼接到它的后面
        $('#' + id_child).clone().attr("id", id_clone).appendTo($('#' + id_child).parent());
        container_father = document.getElementById(id_father);
        container_child = document.getElementById(id_child);
        container_clone = document.getElementById(id_clone);
        
        // 滚动方向
        scrolllDirection = direction || "right";
        // 滚动速度
        scrollSpeed  = speed || 50;
        // 选择滚动方向
        switch (scrolllDirection) {
            case 'up':
                object.MarqueeToTop();
                break;
            case 'down':
                object.MarqueeToDown();
                break;
            case 'left':
                object.MarqueeToLeft();
                break;
            case 'right':
                object.MarqueeToRight();
                break;
            default:
                //object.MarqueeToRight();    
            break;
        }
    };
    
    
    /**
     * 向上滚动
     */
    this.MarqueeToTop = function () {
        var MyMarTop = setInterval(MarqueeTop, scrollSpeed);

        container_father.onmouseover = function() {
            clearInterval(MyMarTop);
        }

        container_father.onmouseout = function() {
            MyMarTop = setInterval(MarqueeTop, scrollSpeed);
        }
        
        function MarqueeTop() {
            if (container_father.scrollTop == container_clone.offsetHeight) {
                container_father.scrollTop = 0;
            } else {
                container_father.scrollTop++;
            }
        }

    };

    /**
     * 向下滚动（倒序播放）
     */
    this.MarqueeToDown = function () {
        var MyMarDown = setInterval(MarqueeDown, scrollSpeed);

        container_father.onmouseover = function() {
            clearInterval(MyMarDown);
        }

        container_father.onmouseout = function() {
            MyMarDown = setInterval(MarqueeDown, scrollSpeed);
        }

        function MarqueeDown() {
            if (container_father.scrollTop == 0) {
                container_father.scrollTop = container_clone.offsetHeight;
            } else {
                container_father.scrollTop--;
            }

        }

    };

    /**
     * 向左滚动
     * @description
     *     展现在父容器内的是子容器中的图片，然后从第一张图片开始往左滚动（正序播放）
     * @achieve
     *     通过从左侧滚动过的像素数的递增（0-maxWidth），来实现图片向左移动
     */
    this.MarqueeToLeft = function () {

        var MyMarLeft = setInterval(MarqueeLeft, scrollSpeed);

        container_father.onmouseover = function() {
            clearInterval(MyMarLeft);
        }

        container_father.onmouseout = function() {
            MyMarLeft = setInterval(MarqueeLeft, scrollSpeed);
        }

        function MarqueeLeft() {
            // 滚动条向右滚动到最大值
            //debugger;    
            if (container_father.scrollLeft == container_clone.offsetWidth) {
                container_father.scrollLeft = 0;
            } else {
                // 滚动条向右移动，图片往左移动
                container_father.scrollLeft++;
            }

        }

    };

    /**
     * 向右滚动
     * @description
        展现在父容器内的是克隆容器中的图片，然后图片开始往右滚动（倒序播放）
     * @achieve
     *     通过从左侧滚动过的像素数的递减（maxWidth-0），来实现图片向右移动
     */
    this.MarqueeToRight = function() {
        var MyMarRight = setInterval(MarqueeRight, scrollSpeed);

        // 鼠标悬浮
        container_father.onmouseover = function() {
            clearInterval(MyMarRight);
        }
        // 鼠标移出
        container_father.onmouseout = function() {
            MyMarRight = setInterval(MarqueeRight, scrollSpeed);
        }
        
        /**
         * 右滚动
         */
        function MarqueeRight() {
            // scrollLeft不会取到负值
            if (container_father.scrollLeft == 0) {
                container_father.scrollLeft = container_clone.offsetWidth;
            } else {
                // 滚动条往左移动，图片向右移动
                container_father.scrollLeft--;
            }
        }
    };
}

　　总结：　　

　　　　1.只有scrollLeft和scrollTop，没有scrollRight和scrollDown；

　　　　2.scrollLeft和scrollTop有最小值（0）和最大值，最小值改不成负数，最大值达到最大后无法再增；

　　　　3.上滚动和左滚动，是正序滚动；下滚动和有滚动，是倒序滚动；

　　　　4.无缝滚动实现条件约束，必须遵循：

　　　　　　水平滚动时，父容器的宽度必须<=子容器所有照片的实际宽度之和；

　　　　　　因为scrollLeft的最大值<offsetWidth，会造成以下状况：

　　　　　　　　左滚动时，当滚动到克隆容器的最后一张照片时，scrollLeft达到最大值，因为不满足if(scrollLeft==offsetWidth)的条件，并且scrollLeft++也无效化，

　　　　　　　　所以不再滚动；

　　　　　　　　右滚动时，当滚动到子容器的第一张照片（srollLeft=0）时，重置scrollLeft=offsetWidth，两者所在的点，即父容器所展示的图片不是完全一模一样的图片，

　　　　　　　　所以给人以不连续的感觉。

　　　　　　垂直滚动时，父容器的高度必须<=子容器所有照片的实际高度之和。

　　　　　　因为scrollTop的最大值<offsetHeight，会造成以下状况：

　　　　　　　　上滚动时，当滚动到克隆容器的最后一张照片时，scrollTop达到最大值，因为不满足if(scrollTop==offsetHeight)的条件，并且scrollTop++也无效化，

　　　　　　　　所以不再滚动；

　　　　　　　　下滚动时，当滚动到子容器的第一张照片（scrollTop=0）时，重置scrollTop=offsetHeight，两者所在的点，即父容器所展示的图片不是完全一模一样的图片，

　　　　　　　　所以给人以不连续的感觉。

　　　　注：想通过padding撑大照片的容器的方法无效。

　　范例：请移步至下面的推荐文章 

 相关推荐：

• js 图片的无缝滚动