图像导航无限循环

Images navigation infinite loop

本文关键字：无限循环 导航 图像      更新时间：2023-09-26

这是我的左右导航代码。我如何在这里添加无限循环:

if (i < this.sindex) { //slide to right
    _old.addClass('right');
    setTimeout(function () {
        _old.removeClass('right sel anim')
    }, 300);
    _new.removeClass('anim right').addClass('sel left');
    setTimeout(function () {
        _new.addClass('anim').removeClass('left')
    }, 5);
} else if (i > this.sindex) { //slide to left
    _old.addClass('left');
    setTimeout(function () {
        _old.removeClass('left sel anim')
    }, 300);
    _new.removeClass('anim left').addClass('sel right');
    setTimeout(function () {
        _new.addClass('anim').removeClass('right')
    }, 5);
}

这是一个sumogallery插件，没有无限循环功能

不确定是否使用任何插件。但是，您可以轻松实现自己的无限导航。为了以非阻塞的方式无限循环，您可以使用setTimeout并递归地调用处理程序。

无限循环:

class InfiniteLooper {
    constructor(arr, handler, options){
        this.arr = arr;
        this.index = 0;
        this.options = options;
        this.handler = handler;
        this.t1 = null
        this.t2 = null
    }
    recur() {
        var that = this;
        if(this.index < this.arr.length){
            this.t1 = setTimeout(this.handler(this.arr[this.index]), 0);
            this.index ++
            if(this.options && this.options.circular && this.index == this.arr.length) {
                this.index = 0;
            }
            this.t2 = setTimeout(function() {
                that.recur()
            }, 0);
        }
    }
    run() {
        this.recur()
    }
    stop() {
        clearTimeout(this.t1)
        clearTimeout(this.t2)
    }
}
const array = [1,2,3,4,5]
const IL = new InfiniteLooper(array, console.log, {circular:true});
IL.run()
// Execute some more code
console.log('Non blocking!');
console.log('Do some math', 100*9);
const t = setInterval(()=>{
console.log('Do some more math in every 1 seconds', Math.random(1,4));
}, 1000)
// stop the loop after 10 sec
setTimeout(()=>{
    IL.stop()
    clearInterval(t)
}, 10000)

我在这里详细写了https://medium.com/@mukeshbiswas/loops - infinity-ina -non-blocking-way-2edca27bc478。

相关文章：