1

ページネーションを使用してカルーセル (デモ)を作成しようとしています。ユーザーが下部のブロックをクリックすると、対応する画像に切り替わります。以下のコードは、私が現在持っているものです。コンソールの巨大なジャンボに注意してください。現在、ユーザーが表示されているブロックの後または前をクリックしているかどうかを判断しています。

//grab the width and calculate left value
var item_width = $('#slides li').outerWidth(); 
var left_value = item_width * (-1); 

//if user clicks on pagination block
$('#pagination ul li').click(function() {
    var $this = $(this);
    var temp = $(this).index() + 1;
    var current = $('#pagination li a.active').parent().index() + 1; // console.log(current + " : " + temp );

    if (current <= temp) {
        // get difference of temp and current (temp - current)
        var jump = Math.abs(temp - current);

        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;

        //slide the item
        $('#slides ul').animate({'left' : left_indent}, 300, function () { 

            //active pagination
            $('#pagination li a.active').removeClass('active');
            $this.children().addClass('active');

            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));                  

            //set the default item to correct position
            $('#slides ul').css({'left' : left_value}); 
            //debugging nonsense
            console.log( "left_indent: " + left_indent + "px" + "\n" + "left_value: " + left_value + "px" + "\n" + "current slide: " + current + "\n" + "future slide: " + temp + "\n" + "difference: " + jump);

        });

    } else if (current >= temp) {
        // get difference of temp and current (temp - current)
        var jump = Math.abs(temp - current);

        //get the right position            
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;

        //slide the item            
        $('#slides ul').animate({'left' : left_indent}, 300,function(){    

            //active pagination
            $('#pagination li a.active').removeClass('active');
            $this.children().addClass('active');

            //move the last item and put it as first item               
            $('#slides li:first').before($('#slides li:last'));           

            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});

            //debugging nonsense
            console.log( "left_indent: " + left_indent + "px" + "\n" + "left_value: " + left_value + "px" + "\n" + "current slide: " + current + "\n" + "future slide: " + temp + "\n" + "difference: " + jump);

        });

    }

});

temp と current の差を取得しようとしました:

var jump = Math.abs(temp - current);

そして、両方を掛けます

$('#slides ul').animate({'left' : left_indent * jump}, 300, function () { 
$('#slides ul').css({'left' : left_value * jump});

ジャンプしますが、機能していません。数回ジャンプした後、空白ができます。

left_indent、left_value、およびページネーションの間の関係をターゲットにできないようです。どんな助けでも大歓迎です。

jsFiddle: http://jsfiddle.net/hyTeq/

4

1 に答える 1

1

あなたのフィドルにはたくさんのコードがあるので、あなたの写真を表示するためにできることの例を作成しました（これでうまくいけば始められるでしょう...）：

フィドルの例

$(document).ready(function(){
$('.container div:first').addClass('active');
$('.container div:not(.active)').hide();
$('.pagination div').click(function(){
//Get the index of pagination and store it in VAR
var getPaginationIndex = $(this).index();
//alert(getPaginationIndex);
$('.active').hide().removeClass('active');
//get div and apply stored index of clicked pagination
//and show it...
$('.container div').eq(getPaginationIndex).show().addClass('active');
});
});
于 2013-02-12T20:28:14.567 に答える