js to achieve seamless scrolling of pictures

Implementation principle:

The picture scrolling principle is the same as the picture carousel principle. It is also applicable to a series of scrolling such as text scrolling. By copying the last picture or the last Insert a bunch of text into the first line, or copy the first picture or a bunch of text and insert it at the end to achieve seamless splicing.

Premise: 1. There must be no transition animation set. 2. When it is reset to 0, the position of the picture that has been scrolled to currently does not appear to change to the naked eye.

Implementation:

html mainly contains three parts:

1. The outermost box is used to display the area of ​​the scrolling image, overflow:hidden;

2. The scrolling box mainly changes the positioning value of the box to achieve scrolling. It contains all the pictures or text to be scrolled.

3. The box containing pictures or text.

Specific code:

class Roll {
    constructor(opts) {
        this.elem = opts.elem; // 图片包含滚动长度的元素的
        this.elemBox = opts.elemBox; //图片展示区域元素，为了获取展示区域的高度
        this.direction = opts.direction;
        this.time = opts.time;
        this.init();
        this.roll = this.roll.bind(this)
        this.startRoll = this.startRoll.bind(this)
        this.stopRoll = this.stopRoll.bind(this)
    }
    init(){
        this.elemHeight = this.elem.offsetHeight;
        this.elemHtml = this.elem.innerHTML;
        this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml;
        this.speed;
        // 如果向上滚或者向左滚动每次减1，向下滚或者向右滚动每次加1
        if(this.direction === 'top' || this.direction === 'left'){
            this.speed = -1;
        }else{
            this.speed = 1;
        }
    }
    roll(){
        switch (this.direction) {
            case "top":
                // 如果滚动的盒子的top值超出元素的高度，则置为0
                if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
                    this.elemBox.style.top = 0;
                }else{
                    this.elemBox.style.top = this.elemBox.offsetTop + this.speed + 'px';
                }
                break;
            case "bottom":
                // 如果滚动的盒子的bottom值超出元素的高度，则置为0
                if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){
                    this.elemBox.style.bottom = 0;
                }else{
                    this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + 'px';
                }
                break;
            case "left":
                // 如果滚动的盒子的left超出元素的高度，则置为0
                if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){
                    this.elemBox.style.left = 0;
                }else{
                    this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + 'px';
                }
                break;
            case "right":
                // 如果滚动的盒子的right超出元素的高度，则置为0
                if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){
                    this.elemBox.style.right = 0;
                }else{
                    this.elemBox.style.right = this.elemBox.offsetRight + this.speed + 'px';
                }
                break;
            default:
                // 默认向上滚动，如果滚动的盒子的top超出元素的高度，则置为0
                if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
                    this.elemBox.style.top = 0;
                }else{
                    this.elemBox.style.top = this.elemBox.offsetTop + speed + 'px';
                }
        }
    }
    stopRoll(){
        clearInterval(this.scrollTimer)
    }
    startRoll(){
        this.scrollTimer = setInterval(this.roll,this.time)
    }
}

Recommended tutorial: js entry tutorial

The above is the detailed content of js to achieve seamless scrolling of pictures. For more information, please follow other related articles on the PHP Chinese website!