javascript - 滑块从第二张图片开始

Question

我正在使用我自己在 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);
    });

这是拇指的脚本：

    $('.box').each( function(n){
        $(this).attr("target","galeria" + n);
    });

    $('.slider_box').each( function(n){
        $(this).attr("id","galeria" + n);
    });

    $('.box').click( function() {
        var toLoad = $(this).attr("target");
        $('.modal_container').fadeIn();
        $('.slider_box#'+toLoad).fadeIn();
    });

Answer 1

我无法对此进行测试，但您的滑块可能会立即调用该run函数

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

如果是这种情况，下一个函数将采用活动幻灯片（在这种情况下0）并立即显示第二张幻灯片1。

在函数内部替换this.next()为this.show().

再次只是一个猜测，因为我无法通过它。

Answer 2

不能在这里使用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);
    });