0

言葉の悪いタイトルを失礼します。うまくいけば、ここで問題を説明できます。

jQueryでシンプルなギャラリーコントロールを作成しました。ユーザーが画像のコレクション全体を循環できるようにする2つのボタンコントロールを備えた6つの画像があります。この部分は正常に機能していますが、ボタンをクリックしてコレクション内を移動すると、ページの「ジャンプ/スクロール」が自動的にページの上部に移動しますか？同様の問題が発生したため、ギャラリーコンテナに固定の高さを設定しようとしましたが、これを解決することができましたが、これは役に立ちませんでした。

jQueryは次のとおりです。

var index = 0;
$(function () {
    $('#btnLeft').click(function () {
        if (index != 0) {
            index--;
            $('#sixth').attr('src', $('#fifth').attr('src'));
            $('#fifth').attr('src', $('#fourth').attr('src'));
            $('#fourth').attr('src', $('#third').attr('src'));
            $('#third').attr('src', $('#second').attr('src'));
            $('#second').attr('src', $('#first').attr('src'));
            $('#first').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(index + 1) + '.png');
        }
    });

    $('#btnRight').click(function () {
        if (parseInt(6 + index) != 10) {
            index++;
            $('#first').attr('src', $('#second').attr('src'));
            $('#second').attr('src', $('#third').attr('src'));
            $('#third').attr('src', $('#fourth').attr('src'));
            $('#fourth').attr('src', $('#fifth').attr('src'));
            $('#fifth').attr('src', $('#sixth').attr('src'));
            $('#sixth').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(6 + index) + '.png');
        }
    });
});

マークアップは次のとおりです。

<div id="gallerySlider" style="height: 160px;">
    <img id="first" src="/Content/Images/Gallery/Thumbs/1.png" alt="Image" width="160" height="160" style="float:left;" /> 
    <img id="second" src="/Content/Images/Gallery/Thumbs/2.png" alt="Image" width="160" height="160" style="float:left;" />
    <img id="third" src="/Content/Images/Gallery/Thumbs/3.png" alt="Image" width="160" height="160" style="float:left;" />
    <img id="fourth" src="/Content/Images/Gallery/Thumbs/4.png" alt="Image" width="160" height="160" style="float:left;" />
    <img id="fifth" src="/Content/Images/Gallery/Thumbs/5.png" alt="Image" width="160" height="160" style="float:left;" />
    <img id="sixth" src="/Content/Images/Gallery/Thumbs/6.png" alt="Image" width="160" height="160" style="float:left;" />

    <a id="btnLeft" style="position:relative; float:left; bottom:105px;" href="#"><img src="/Content/Images/Design/leftbutton.png" alt="Left Button" /></a>
    <a id="btnRight" href="#" style="position:relative; float:right; bottom:105px;"><img src="/Content/Images/Design/rightbutton.png" alt="Right Button" /></a>
</div>

誰かアドバイスはありますか？

ありがとう

4

1 に答える 1

3

.preventDefault()ブラウザのデフォルトのロードとジャンプを停止するには、次のように使用します。

$('#btnLeft').click(function (e) {

        e.preventDefault();

        if (index != 0) {
            index--;
            $('#sixth').attr('src', $('#fifth').attr('src'));
            $('#fifth').attr('src', $('#fourth').attr('src'));
            $('#fourth').attr('src', $('#third').attr('src'));
            $('#third').attr('src', $('#second').attr('src'));
            $('#second').attr('src', $('#first').attr('src'));
            $('#first').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(index + 1) + '.png');
        }
    });

    $('#btnRight').click(function (e) {

        e.preventDefault();

        if (parseInt(6 + index) != 10) {
            index++;
            $('#first').attr('src', $('#second').attr('src'));
            $('#second').attr('src', $('#third').attr('src'));
            $('#third').attr('src', $('#fourth').attr('src'));
            $('#fourth').attr('src', $('#fifth').attr('src'));
            $('#fifth').attr('src', $('#sixth').attr('src'));
            $('#sixth').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(6 + index) + '.png');
        }
    });
于 2012-07-18T14:40:39.973 に答える