2

クライアント領域のスライドの選択に問題があります。以下のリンクを確認してください

デモ

現在、ここには 10 個の画像がありますが、スライドして 6 個の画像を表示するだけです。

画像が完成するまでサムネイルスクロール幅をスクロールさせたい。

<div class="inner_right_main_tow thumbnailscroller">Content here</div>

そしてここにjqueryコードがあります、

$(".carousel-next").click(function(){
     $(this).parents(".thumbnailscroller").find("ul").animate({left: '-710px'});
});

$(".carousel-previous").click(function(){
     $(this).parents(".thumbnailscroller").find("ul").animate({left: '0'});
});
4

1 に答える 1

1

This happens because you give it a fixed location to scroll to -710px

You need to make this dynamic with -=710px. This means that each time you click it will move 710 pixels to the left.

$(".carousel-next").click(function(){
     $(this).parents(".thumbnailscroller").find("ul").animate({left: '-=710px'});
});

But now you need to handle the when to stop..

Update to handle stopping (gets more complicated)

I would change the CSS to make it easier..

CSS fixes

  • Remove the 9999px from the .carousel rule.

  • For the .thumbnailscroller .carousel ul add 

    white-space:nowrap;
display:inline-block;

  • and for the .inner_right_main_tow li remove the float:left and add

    display:inline-block;

jQuery

$(window).load(function(){
    var ul = $('.thumbnailscroller').find('ul'),
        step = ul.closest('.thumbnailscroller').width(),
        maxLoc = step - ul.width();

    $(".carousel-next").click(function(){
        var animated = ul.is(':animated'),
            currentLoc = parseInt(ul.css('left'),10),
            nextPos = Math.max(maxLoc, currentLoc -step); 

        if (!animated){
            ul.animate({left: nextPos});
        }
    });
    $(".carousel-previous").click(function(){
        var animated = ul.is(':animated'),
            currentLoc = parseInt(ul.css('left'),10),
            nextPos = Math.min(0, currentLoc +step); 

        if (!animated){
            ul.animate({left: nextPos});
        }
    });
});
于 2012-11-13T10:37:29.477 に答える