0

プラグインなしでこのスクロール機能を追加して、1 つのページで大きな画像のギャラリーを上下にスクロールしました。私のコードはあまりエレガントではありませんが、スクロールは基本的に矢印をクリックすると画像から画像へと繰り返されます。

    <script>
    $(document).ready(function (){
        $("#click4").click(function (){
                $('html, body').animate({
                    scrollTop: $("#image2").offset().top
                }, 600);
        });
    });

</script>

    <script>
    $(document).ready(function (){
        $("#click5").click(function (){
                $('html, body').animate({
                    scrollTop: $("#image4").offset().top
                }, 600);
        });
    });
</script>


<div id="top">
        <class id="image3"><img src="images/blank.png" alt=""/></class></div>

        <div id="gallery">  
        <img src="images/image3.jpg" alt=""/>
        </div>
<div id="title">
        Untitled<br>2013<br>size<br>Archival pigment print<br>
        Edition of <br></div>
<div id="arrows">
        <class id="click4"> <span class="arrow-n"></span> </class>
        </div>  
<div id="arrows">
        <class id="click5"> <span class="arrow-s"></span> </class>

</div>

<script>
    $(document).ready(function (){
        $("#click6").click(function (){
                $('html, body').animate({
                    scrollTop: $("#image3").offset().top
                }, 800);
        });
    });

</script>

    <script>
    $(document).ready(function (){
        $("#click7").click(function (){
                $('html, body').animate({
                    scrollTop: $("#image5").offset().top
                }, 800);
        });
    });
</script>


<div id="top">
        <class id="image4"><img src="images/blank.png" alt=""/></class>  </div>

        <div id="gallery">  
        <img src="images/image4.jpg" alt=""/>
        </div>
<div id="title">
        Untitled<br>2013<br>size<br>Archival pigment print<br>
        Edition of <br></div>
<div id="arrows">
        <class id="click6"> <span class="arrow-n"></span> </class>
        </div>  
<div id="arrows">
        <class id="click7"> <span class="arrow-s"></span> </class>

</div>

私が抱えている問題は、上下に移動すると画像がちらつくように見えることです。2 つの質問です。

  1. スクロール時に大きな画像のちらつきを避ける簡単な方法はありますか?
  2. 各画像にスクロールするときにフェード イン フェード アウトを追加できますか。これをスクリプトに追加するにはどうすればよいですか。これにより、ちらつきの量が減り、素敵な効果が追加されると思います。アドバイスをありがとう。
4

1 に答える 1

0

私はあなたが投稿したものを見てきましたが、あなたのコードをそのまま動作させることはできません. まず、スクリプトを 1 つにまとめるようにしてください。たとえば、クリックごとに 1 つの画像にスクロールする関数があります。あなたがすべきことは、1つの関数だけを作成し、スクロールする画像をチェックすることです。これを行うには多くの方法がありますが、例を次に示します。

$(".clk").click(function () {
    var $this = $(this),
        img = $this.data('img');

    $('html, body').animate({
        scrollTop: $("#"+img).offset().top
    }, 600);
});

この関数に加えて、次のようにマークアップを変更する必要があります。

<div id="Div6">
    <div id="click7" data-img="image5" class="clk"> <span class="arrow-s"></span> 
    </div>
</div>

そのため、clk のクラスを追加しました。これは、ID をクリックするのではなく、関数を呼び出すものであり、このクラスを必要な数の画像に追加できるようにします。次に、関数内で、各 ID 関数にハードコードされた画像の上部までスクロールしています... HTML データ属性「data-」を追加し、それを img (「data-img」) と呼びました。したがって、クラスをクリックすると、属性を読み取り、どこにスクロールするかを知る関数が呼び出されます。

これが機能したら、html、jquery、および css をボックスに貼り付けてコードを実行できる jsFiddle (jsfiddle.net) を作成してください。次に、それを保存して、ここにリンクを投稿してください。そうすれば、動作中のバージョンを確認できます。もう一度確認します。;-)

于 2013-11-13T11:44:47.023 に答える