0

私はおそらく本当に単純なものが欠けていますが、これを機能させることができません！私はこの質問に基づいています-ボタンを使用した水平スクロールdiv

左右にスクロールしません。

私もこのエラーがあります：

ここに画像の説明を入力してください

また、リンクがクリックされたときにページがリロード/ジャンプした場合、それを修正する方法はありますか？

                <div id="imgThumbs" class="scroller" style="height:97px;width: 306px; overflow: hidden; white-space: nowrap;">
                    <a href="#" id="left-button">Left</a>  
                    <a href="#" id="right-button">Right</a>
                    <div id="contentScroller">                         
                    <?php $counter = 1; while(the_repeater_field('images')): ?>                     
                        <a href="#" 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>

アップデート

何か他のものを見つけました...コンテンツが終了しても左右にスクロールし続けることができます。したがって、そこに6つの画像がある場合は、最初の3つが表示され、右クリックして次の3つが表示され、右クリックすると空の領域にスクロールし、もう一度クリックします。それを修正する方法はありますか？

4

1 に答える 1

1

クリックハンドラーでは、でfunction {ある必要がありますfunction() {。

marginLeft: -="305px"間違っている。-=は引用符の中に入れる必要があります。marginLeft:"-=305px"

アップデート

私はこれをテストしませんでしたが、基本的にあなたがする必要があるのは、アニメーションを行う前にあなたが左または右の終わりにいないことを確認することです。アプリケーションのためにこれにいくつかの変更を加える必要があるかもしれませんが、それはあなたに基本的な考えを与えるはずです。

jQuery(document).ready(function ($) {
    $('#right-button').click(function() {
        if($('#contentScroller').css('marginLeft') > 0){
            $('#contentScroller').animate({
                marginLeft: "-=306px"
                }, "fast");
             });
         }

    $('#left-button').click(function() {
         if($('#contentScroller').css('marginLeft') < -1 * $('#contentScroller').width()){
            $('#contentScroller').animate({
                marginLeft: "+=306px"
                }, "fast");
            });                     
         }
    });
});
于 2012-11-02T16:17:31.620 に答える