Question

我要做的是将一些幻灯片添加到我当前的幻灯片中。它最初只有9张幻灯片，但我不得不添加一些幻灯片。起初我认为这就像改变

一样简单

slider.slides = 9;

到

slider.slides = 11;

但这显然很难，因为额外的幻灯片没有显示，但原始的9是。

我将添加我正在使用的jQuery，并希望它与之相关。如果没有，我将继续前进，共同获得一个JSFiddle。

var slider = {};
        slider.current = 1;
        slider.slides = 11;
        slider.goto = function (slideNumber, callback) {
            var difference = Math.abs(this.current - slideNumber);
            this.current = slideNumber;

            $('#slides').stop().animate({
                left: (-(slideNumber-1)*100) + '%'
            }, 400*difference, callback);

            $('a[href^="#slide-"]').parent().removeClass('active');
            $('a[href="#slide-' + slideNumber + '"]').parent().addClass('active');
        }

        slider.prev = function(){
            if(this.current > 1) {
                var slideNumber = Number(this.current)-1;
                this.goto(slideNumber);
            }
        }

        slider.next = function(){
            if(this.current < this.slides) {
                var slideNumber = Number(this.current)+1;
                this.goto(slideNumber);
            }
        }

        $('a').bind('click', function(event){
            var link = $(this).attr('href');
            if (link.indexOf('#slide-') != -1) {
                event.preventDefault();

                var slideNumber = link.replace('#slide-','');
                if (slideNumber == 'next') {
                    slider.next();
                } else if (slideNumber == 'prev') {
                    slider.prev();
                } else {
                    slider.goto(slideNumber);
                }
            }
        });

        $(window).keydown(function(event){
            if(event.keyCode == 39) {
                slider.next();
            } else if (event.keyCode == 37) {
                slider.prev();
            }
        });

这是导航

    <ul>
        <li class="active"><a href="#slide-1">1</a></li>
        <li><a href="#slide-2">2</a></li>
        <li><a href="#slide-3">3</a></li>
        <li><a href="#slide-4">4</a></li>
        <li><a href="#slide-5">5</a></li>
        <li><a href="#slide-6">6</a></li>
        <li><a href="#slide-7">7</a></li>
        <li><a href="#slide-8">8</a></li>
        <li><a href="#slide-9">9</a></li>
        <li><a href="#slide-10">10</a></li>
        <li><a href="#slide-11">11</a></li>
        <li><a href="/resources/">Back</a></li>
    </ul>

我希望如果不让我知道，这就足够了。

[Heres the Jsfiddle总是http://jsfiddle.net/cry4gLn6/1/]

Answer 1

您只需要更新#slides div

的宽度

目前为900%

如果使用jquery动态计算此宽度，具体取决于no。幻灯片，您的滑块将适用于任何否。幻灯片。

Answer 2

您应该将以下内容添加到您的javascript：

$('#slides').css('width', (slider.slides * 100) + '%');
$('.slide').css('width', (100 / slider.slides) + '%');

这将动态计算滑块与任意数量的幻灯片一起使用所需的总宽度。我已更新your fiddle here。

试图添加幻灯片

2 个答案: