12

下にjquery画像スクローラーがあり、水平方向に左右にスクロールします。以下のループには、無限の数の画像が含まれる可能性があります。

私が抱えている問題は、左右にうまくスクロールしている間、画像が終了したらスクロールを続けることができるので、基本的には空白をスクロールしているだけです！

画像が終了したときにスクロールできないように最大スクロールを設定するにはどうすればよいですか？明らかに、画像の数は動的であるため、1つまたは100の画像を含めることができます。

<div id="imgThumbs" class="scroller" style="position:relative;height:75px;width: 306px; overflow: hidden; white-space: nowrap;">
    <a href="#" id="left-button" style="left:14px;top:25px;position:absolute;">
        <img src="left-button.png" width="20" height="20" />
    </a>  
    <a href="#" id="right-button" style="right:14px;top:25px;position:absolute;">
        <img src="right-button.png" width="20" height="20" />                               
    </a>
    <div id="contentScroller">                         
    <?php $counter = 1; while(the_repeater_field('images')): ?>                     
        <a class="fancybox" rel="group" href="<?php echo the_sub_field('high_resolution_image'); ?>" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
            <img class="image-<?php echo $counter; ?>" src="<?php echo the_sub_field('image'); ?>" width="90" height="68" alt="<?php echo the_title(); ?> <?php echo $counter; ?>" />
        </a>
     <?php $counter++; endwhile; ?>
     </div>
</div>
<script>
    jQuery(document).ready(function ($) {
        $('#right-button').click(function() {
            $('#contentScroller').animate({
                marginLeft: "-=306px"
            }, "fast");
        });
        $('#left-button').click(function() {
            $('#contentScroller').animate({
                marginLeft: "+=306px"
            }, "fast");
        });                     
    });
</script>

アップデート

これがフィドルです-http://jsfiddle.net/jCskY/2/

4

2 に答える 2

1

コンテンツの幅の合計によって計算されmarginLeftた幅とを比較します。a

マージンが幅を超える場合、ボタンを非表示にする必要があります。それ以外の場合は、表示されます。

これは、それがどのように実装されるかのスニペットです。

また、ライブの例については、このフィドルを参照してください！

var updateRightLeftButtons = function() {
    if (306 > (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
        $('#left-button').hide();
    } else {
        $('#left-button').show();
    }
    if ((($('#contentScroller a').width() * $('#contentScroller a').length) - 306) < (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
        $('#right-button').hide();
    } else {
        $('#right-button').show();
    }
};
$('#right-button').click(function() {
    updateRightLeftButtons();
    if ($(this).is(':visible'))
    $('#contentScroller').animate({
        marginLeft: "-=306px"
    }, "fast", updateRightLeftButtons);
});
$('#left-button').click(function() {
    updateRightLeftButtons();
    if ($(this).is(':visible'))
    $('#contentScroller').animate({
        marginLeft: "+=306px"
    }, "fast", updateRightLeftButtons);
});
updateRightLeftButtons();​
于 2012-11-06T13:50:00.457 に答える
-1 
<?php
$dirname = '_/img/album';
$pattern = "/(\.jpg$)/i"; // valid image extensions
if (is_dir($dirname)) {
    if ($handle = opendir($dirname)) {
        $count = 0;
        while (false !== ($file = readdir($handle))) {
            // if this file is a valid image
            if (preg_match($pattern, $file)) {
                $count++;
            }
        }
        closedir($handle);
    }
}
?>

次に、カウントに20を掛けて、値をdivコンテナの幅に設定します。

于 2012-11-06T14:19:10.453 に答える