Javascript 滑块从第二个图像开始

我在stackoverflow社区的一些人的帮助下使用自己创建的滑块

我的问题是，滑块从第二个图像开始，而不是第一个图像

我从0开始，所以我不知道问题出在哪里，有什么想法吗

以下是脚本：

    function slider(sel, intr, i) {
        var _slider = this;
        this.ind = i;
        this.selector = sel;
        this.slide = [];
        this.slide_active = 0;
        this.amount;
        this.timer = null;
        this.selector.children('img').each(function (i) {
            _slider.slide[i] = $(this);
            $(this).hide();
        });

        //Display buttons and register events
        $(this.selector).hover(
        function () {
            $(this).append('<div id="previous-slider-' + i + '" class="previous-arrow arrow"></div>');
            $(this).append('<div id="next-slider-' + i + '" class="next-arrow arrow"></div>');
            $('#next-slider-' + i).click(function () {
                _slider.next();
            });
            $('#previous-slider-' + i).click(function () {
                _slider.previous();
            });
        },
        function () {
            //Remove buttons and events
            $('.arrow').remove();
        });

        this.run();
    }       
    slider.prototype.run = function () {
        this.next();
    }
    slider.prototype.next = function () {
        var _s = this;
        _s.show(1);/*
    */
    }
    slider.prototype.previous = function () {
        var _s = this;
        _s.show(-1);
    }
    slider.prototype.show = function (shift) {
        var _s = this;
        _s.slide[_s.slide_active].fadeOut(300, function () {
            _s.slide_active = (_s.slide_active + shift < 0) ? _s.slide.length - 1 : (_s.slide_active + shift) % _s.slide.length;
            _s.slide[_s.slide_active].fadeIn(300)
        });
    }

    var slides = [];
    $('.slider').each(function (i) {
        slides[i] = new slider($(this), i);
    });

---

我还没能测试这个，但是你的滑块可能会立即调用

run

函数

slider.prototype.run = function () {
    this.next();
}

如果是这种情况，则下一个函数将使用活动幻灯片（在本例中为

0

），并立即显示第二张幻灯片

1

在函数内部，将

this.next（）

替换为

this.show（）

---

还是一个猜测，因为我不能单步执行。

这里不能使用jsfilleś解决方案代码

    function slider(sel, intr, i) {
        var _slider = this;
        this.ind = i;
        this.selector = sel;
        this.slide = [];
        this.slide_active = 0;
        this.amount;
        this.timer = null;
        this.selector.children('img').each(function (i) {
            _slider.slide[i] = $(this);
            $(this).hide();
        });

        //Display buttons and register events
        $(this.selector).hover(
        function () {
            $(this).append('<div id="previous-slider-' + i + '" class="previous-arrow arrow">Previous</div>');
            $(this).append('<div id="next-slider-' + i + '" class="next-arrow arrow">Next</div>');
            $('#next-slider-' + i).click(function () {
                _slider.next();
            });
            $('#previous-slider-' + i).click(function () {
                _slider.previous();
            });
        },
        function () {
            //Remove buttons and events
            $('.arrow').remove();
        });

        this.run();
    }
    slider.prototype.run = function () {
        var _s = this;
        _s.show(0);
       _s.timer = setInterval(function () {
        _s.next();
       },interval);
    }
    slider.prototype.next = function () {
        var _s = this;
        clearInterval(this.timer);
        _s.show(1);
        this.timer = setInterval(function () {
            _s.show(1);
        }, interval);
    }
    slider.prototype.previous = function () {
        var _s = this;
        clearInterval(this.timer);
        _s.show(-1);
        this.timer = setInterval(function () {
            _s.show(1);
        }, interval);
    }
    slider.prototype.show = function (shift) {
        var _s = this;
        _s.slide[_s.slide_active].fadeOut(300, function () {
            _s.slide_active = (_s.slide_active + shift < 0) ? _s.slide.length - 1 : (_s.slide_active + shift) % _s.slide.length;
            _s.slide[_s.slide_active].fadeIn(300);
        });
    }

    var slides = [];
    var interval = 3000
    $('.slider').each(function (i) {
        slides[i] = new slider($(this), interval, i);
    });slider.prototype.previous = function () {
        var _s = this;
        clearInterval(this.timer);
        _s.show(-1);
        this.timer = setInterval(function () {
            _s.show(1);
        }, interval);
    }
    slider.prototype.show = function (shift) {
        var _s = this;
        _s.slide[_s.slide_active].fadeOut(300, function () {
            _s.slide_active = (_s.slide_active + shift < 0) ? _s.slide.length - 1 : (_s.slide_active + shift) % _s.slide.length;
            _s.slide[_s.slide_active].fadeIn(300);
        });
    }

    var slides = [];
    var interval = 3000
    $('.slider').each(function (i) {
        slides[i] = new slider($(this), interval, i);
    });

功能滑块（sel、intr、i）{
var _滑块=此；
this.ind=i；
this.selector=sel；
this.slide=[]；
此.slide_active=0；
这一数额；
this.timer=null；
this.selector.children（'img'）。每个（函数（i）{
_slider.slide[i]=$（这个）；
$（this.hide（）；
});
//显示按钮和注册事件
$（this.selector）。悬停(
函数（）{
$（this.append（'Previous'）；
$（this.append（'Next'）；
$（“#下一个滑块-”+i）。单击（函数（）{
_slider.next（）；
});
$（'#上一个滑块-'+i）。单击（函数（）{
_slider.previous（）；
});
},
函数（）{
//删除按钮和事件
$（'.arrow'）.remove（）；
});
这个。run（）；
}
slider.prototype.run=函数（）{
var _s=这个；
_s、 显示（0）；
_s、 定时器=设置间隔（函数（）{
_s、 next（）；
}，间隔）；
}
slider.prototype.next=函数（）{
var _s=这个；
clearInterval（这个计时器）；
_s、 表演（1）；
this.timer=setInterval（函数（）{
_s、 表演（1）；
}，间隔）；
}
slider.prototype.previous=函数（）{
var _s=这个；
clearInterval（这个计时器）；
_s、 显示（-1）；
this.timer=setInterval（函数（）{
_s、 表演（1）；
}，间隔）；
}
slider.prototype.show=函数（shift）{
var _s=这个；
_s、 幻灯片[\u s.幻灯片\u活动]。淡出（300，功能（）{
_s、 slide_active=（_.slide_active+shift<0）？_.slide.length-1:（_.slide_active+shift）%_.slide.length；
_s、 幻灯片[\u s.幻灯片\u活动].fadeIn（300）；
});
}
var=[]；
var间隔=3000
$（'.slider'）。每个（函数（i）{
幻灯片[i]=新滑块（$（此），间隔，i）；
});slider.prototype.previous=函数（）{
var _s=这个；
clearInterval（这个计时器）；
_s、 显示（-1）；
this.timer=setInterval（函数（）{
_s、 表演（1）；
}，间隔）；
}
slider.prototype.show=函数（shift）{
var _s=这个；
_s、 幻灯片[\u s.幻灯片\u活动]。淡出（300，功能（）{
_s、 slide_active=（_.slide_active+shift<0）？_.slide.length-1:（_.slide_active+shift）%_.slide.length；
_s、 幻灯片[\u s.幻灯片\u活动].fadeIn（300）；
});
}
var=[]；
var间隔=3000
$（'.slider'）。每个（函数（i）{
幻灯片[i]=新滑块（$（此），间隔，i）；
});

也许我忽略了它，但是你能展示一下什么样的代码调用了gallery来打开吗？对不起，让我更新一下，Hanks Jon，尝试将它更改为

this.show（）

，但是它会隐藏所有图像。这里是我的滑块的一把小提琴，它再现了相同的错误，也从第二张图像开始。。在我正在工作的网站中，我删除了间隔（小提琴有），但它在开始时没有改变任何东西，所以不用担心…我被难住了。我知道这与调用函数时立即运行

this.run（）

有关，因为这会立即调用

函数。next（）

函数每次点击“next”时，它只会显示第一张你搞错的图像，你只需要在你的运行函数中添加一个超时，因为你没有设置一个，看一看，但是你的提琴也会在第二个图像上启动，不是吗？很抱歉，提琴现在应该更新了，当然它可以工作了，但是你需要设置一个超时延迟，你必须显示（0）我用一个间隔尝试过你的代码，但是现在它会在第三个图像上启动。你测试过了吗？

    function slider(sel, intr, i) {
        var _slider = this;
        this.ind = i;
        this.selector = sel;
        this.slide = [];
        this.slide_active = 0;
        this.amount;
        this.timer = null;
        this.selector.children('img').each(function (i) {
            _slider.slide[i] = $(this);
            $(this).hide();
        });

        //Display buttons and register events
        $(this.selector).hover(
        function () {
            $(this).append('<div id="previous-slider-' + i + '" class="previous-arrow arrow">Previous</div>');
            $(this).append('<div id="next-slider-' + i + '" class="next-arrow arrow">Next</div>');
            $('#next-slider-' + i).click(function () {
                _slider.next();
            });
            $('#previous-slider-' + i).click(function () {
                _slider.previous();
            });
        },
        function () {
            //Remove buttons and events
            $('.arrow').remove();
        });

        this.run();
    }
    slider.prototype.run = function () {
        var _s = this;
        _s.show(0);
       _s.timer = setInterval(function () {
        _s.next();
       },interval);
    }
    slider.prototype.next = function () {
        var _s = this;
        clearInterval(this.timer);
        _s.show(1);
        this.timer = setInterval(function () {
            _s.show(1);
        }, interval);
    }
    slider.prototype.previous = function () {
        var _s = this;
        clearInterval(this.timer);
        _s.show(-1);
        this.timer = setInterval(function () {
            _s.show(1);
        }, interval);
    }
    slider.prototype.show = function (shift) {
        var _s = this;
        _s.slide[_s.slide_active].fadeOut(300, function () {
            _s.slide_active = (_s.slide_active + shift < 0) ? _s.slide.length - 1 : (_s.slide_active + shift) % _s.slide.length;
            _s.slide[_s.slide_active].fadeIn(300);
        });
    }

    var slides = [];
    var interval = 3000
    $('.slider').each(function (i) {
        slides[i] = new slider($(this), interval, i);
    });slider.prototype.previous = function () {
        var _s = this;
        clearInterval(this.timer);
        _s.show(-1);
        this.timer = setInterval(function () {
            _s.show(1);
        }, interval);
    }
    slider.prototype.show = function (shift) {
        var _s = this;
        _s.slide[_s.slide_active].fadeOut(300, function () {
            _s.slide_active = (_s.slide_active + shift < 0) ? _s.slide.length - 1 : (_s.slide_active + shift) % _s.slide.length;
            _s.slide[_s.slide_active].fadeIn(300);
        });
    }

    var slides = [];
    var interval = 3000
    $('.slider').each(function (i) {
        slides[i] = new slider($(this), interval, i);
    });