0

編集：助けやすくするためにjsfiddleに投稿されました：http：//jsfiddle.net/GXf45/

スライドショーを作成することができ（チュートリアルとスタックオーバーフローを使用して）、現在、いくつかの機能の追加に取り組んでいます。ショーの各スライドのボタン。

前のボタンと次のボタンは完全に機能しますが（特に最初と最後のスライドで）、中間のボタンに問題があります。後で、スライドの数に基づいてjqueryがボタンを追加することを想像します。

以下のコードは、私が取り組んでいるリビジョンの1つにすぎません。私が持っているものを改善する機会はたくさんあると思います。私のエラーがどこにあるのか、そしてこれをクリーンアップするためにあなたが何をすることができるのかを教えてください。ありがとう。

htmlには、最初にいくつかのルビーがあり、いくつかのパーシャルに基づいて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;

}
4

1 に答える 1

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

このフィドルを試してみてください。

于 2012-10-24T00:47:36.600 に答える