Question

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

我遇到的问题是滑块是从第二张图片开始的，而不是第一张图片。

enter image description here

我用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);
    });

滑块在第二张图像上开始

2 个答案: