0

これは私の初めての Stack Overflow への投稿です。これは、この問題についてこの 1 日間頭を悩ませていたからです。

私はjQueryを初めて使用し、物事がどのように機能するかについての基本的な理解を持っていますが、関数が処理された後にループバックするのに本当に苦労しています。これは、一連の 5 つの画像を実行してそれらが表示されているかどうかを確認する単純な if/else 関数です。

画像が表示されている場合 (つまり、ギャラリー内の現在の画像)、[次へ] ボタンと [前へ] ボタンは、次にどの画像をフェードインし、続いて前の画像をフェードアウトするかを制御します。

最初の画像で次/前のリンクが機能していますが、2番目の画像がフェードインすると機能しません。画像の有無を確認するためにスクリプトを呼び出す必要があるためだと思います見える。私の問題は、コードを配置する場所がわからないことです。私はさまざまな場所でコードを試しました.jQueryの遅延とコールバックを調査して、タイミングが機能していないかどうかなどを試してみることができるかどうかを確認しました.しかし、うまくいきません!

誰かがこれを機能させるのを手伝ったり、私が知らないこれを作成するより簡単な方法を提案したりできれば、私は大いに感謝します!

画像は、div 内に単純にリストされています。

<div class="images">
    <img class="image gallery-img" id="1" src="/images/01.jpg" />
    <img class="image gallery-img" id="2" src="/images/02.jpg" />
    <img class="image gallery-img" id="3" src="/images/03.jpg" />
    <img class="image gallery-img" id="4" src="/images/04.jpg" />
    <img class="image gallery-img" id="5" src="/images/05.jpg" />
</div>

<div class="gallery-controls">
    <a class="gallery-button" id="previous" href="#previous">Previous</a>
    <a class="gallery-button" id="next" href="#next">Next</a>
</div>

そしてjQueryは次のとおりです。

window.addEventListener( 'DOMContentLoaded', function(){

function galleryLoop(){

        if( $('div.images img:nth-child(1)').css({ 'display' : 'inline' }) ){

            //#NEXT CLICK
            $('a.gallery-button#next').bind('click', function(){
                $('div.images img:nth-child(1)').fadeOut( '100' , function(){ 
                    $('div.images img:nth-child(2)').fadeIn();
                });//END FADE OUT
            }); //END #NEXT CLICK

            //#PREVIOUS CLICK
            $('a.gallery-button#previous').bind('click', function(){
                $('div.images img:nth-child(1)').fadeOut( '100' , function(){ 
                    $('div.images img:nth-child(5)').fadeIn();
                });//END FADE OUT
            }); //END #PREVIOUS CLICK

        } //END IF

        else if( $('div.images img:nth-child(2)').css({ 'display' : 'inline' }) ){

            //#NEXT CLICK
            $('a.gallery-button#next').bind('click', function(){
                $('div.images img:nth-child(2)').fadeOut( '100' , function(){ 
                    $('div.images img:nth-child(3)').fadeIn();
                });//END FADE OUT
            }); //END #NEXT CLICK

            //#PREVIOUS CLICK
            $('a.gallery-button#previous').bind('click', function(){
                $('div.images img:nth-child(2)').fadeOut( '100' , function(){ 
                    $('div.images img:first-child').fadeIn();
                });//END FADE OUT
            }); //END #PREVIOUS CLICK

        }; //END IF

    };

galleryLoop();

});//END スクリプト

4

2 に答える 2

0

イベントリスナーから関数を削除すると、いつでも呼び出すことができます。

于 2012-06-12T19:16:06.667 に答える
0

OK、これに多くの時間を費やしたので、問題が解決することを願っています!

JSFiddle へのリンクは次のとおりです: http://jsfiddle.net/ekUvj/22/

あなたがしたいことは、JavaScriptをこれに変更することです：

var imgNum = 1;
$("#1").fadeIn(300);


function prev () {
    newImageNum=(imgNum == 1)?5:imgNum-1;
    $("#".concat(imgNum)).fadeOut(300, function () {$("#".concat(newImageNum)).fadeIn(300);});
    imgNum = newImageNum;
}

function next () {
    newImageNum=(imgNum == 5)?1:imgNum+1;
    $("#".concat(imgNum)).fadeOut(300, function () {$("#".concat(newImageNum)).fadeIn(300);});
    imgNum = newImageNum;
}​

次に、ボタンが関数を呼び出すことを確認します。

<div class="gallery-controls">
    <button onclick="prev()">Previous</a>
    <button onclick="next()">Next</a>
</div>​

次に、CSS で最初に画像が非表示になっていることを確認します。

.gallery-img {
    display: none;
}​
于 2012-06-12T19:50:10.553 に答える