Question

编辑：发布在jsfiddle上以便于帮助：http://jsfiddle.net/GXf45/

我已经能够创建幻灯片了（通过使用教程和堆栈溢出），现在我正在努力添加一些功能;节目中每张幻灯片的按钮。

上一个和下一个按钮完美运行（特别是在第一张和最后一张幻灯片上），但我遇到了中间按钮的问题。后来我想象jquery根据幻灯片的数量添加按钮。

以下代码只是我正在进行的修订之一。我认为有很多机会可以改善我所拥有的东西。让我知道我的错误在哪里以及你可以做些什么来清理它。谢谢。

html在开头有一些ruby，它基于一些部分来填充div。

html：

<div class='slider'>
    <ul>
    <% Dir["app/views/main/show/*"].each do |file| %>
      <li><%= render :file => Rails.root.join(file).to_s %></li>
    <% end %>
    </ul>

</div>
    <div id='slider-nav'>
    <button data-dir='prev'>Prvious</button>
    <button data-dir='next'>Next</button>
    <button data-dir='1'>1</button>
    <button data-dir='2'>2</button>
    <button data-dir='3'>3</button>
    <button data-dir='4'>4</button>
</div>

JS：

$(document).ready(function(){

    var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'),
    imgs = $('.showScene'),
    imgWidth = $('.showScene').width(),
    imgsLen = imgs.length,
    current = 1,
    totalImgsWidth = imgsLen * imgWidth;


    $('#slider-nav').show().find('button').on('click', function(){
        var direction = $(this).data('dir'),
        loc = imgWidth;

        //update current value
        //(direction == 'next' ) ? ++current : --current;

        if (direction == 'next')
            {
                current += 1; //2
            } 
        else if (direction == 'prev') 
            {
                current -= 1;//0
            }
        else
            {
                current = direction;    
            }

        //if first image
        if ( current == 0 ) {
            current = imgsLen;
            loc = totalImgsWidth - imgWidth;
            direction ='next';
        } else if ( current - 1 == imgsLen){
            current = 1;
            loc = 0;
        }

        transition(sliderUL, loc, direction);

    }); 

    function transition( container, loc, direction ){
        var unit; //-= or +=

        if ( direction && loc !== 0) {
            unit = ( direction == 'next') ? '-=' : '+=';
        }

        container.animate({
            'margin-left': unit ? (unit + loc) : loc
        });

    };


});

的CSS：

*{margin:0px;padding: 0px;}
.showScene{
    width: 800px;
    height: 300px;

}

#slider-nav{
    margin-top: 1em;
    display: none;

}
#slider-nav button{
    padding: 1em;
    margin-right: 1em;
    border-radius: 10px;
    cursor: pointer;
}
.slider{
    width: 800px;
    height: 300px;
    border: 2px solid grey;
    overflow: scroll;

}
.slider ul {
    width: 10000px;
    list-style: none;


}
.slider ul li{
    float:left;
    list-style-type: none;

}

Answer 1

您错过了编制按钮的loc和direction参数的逻辑。这是主要的片段，请注意我重新编写了一些代码以重用滑动逻辑。你只需要确定你需要从当前位置滑动多少，以及滑动的方向。

var num = parseInt(direction);
if (num !== current) {
    loc = imgWidth*(num -current);
    if (loc < 0) {
        direction = 'prev';
        loc = -loc;
    } else {
        direction = 'next';
    }
    current = num;
    doSlide(direction, loc);
}

尝试this小提琴。

带有附加按钮的jquery滑块

1 个答案: