表示/非表示のキャプション付きjQueryスライドショーを作成

Question

私はこのフォーラムやコーディング（今までは4つのクラス）を初めて使いました。

私の割り当ては、jQueryを使用して4枚のスライドショーを作成することです。私が理解しようとしているのは、最初の画像以外のすべての画像を隠し、次の画像および/または前の画像を取得して、前または後ろのボタンをクリックしたときに表示する方法です。次に、各写真をクリックすると表示/非表示になる各写真にテキストキャプションを追加する必要があります。

このためにjQueryコードを作成することから始める方法については完全に困惑しています。私は自分のHTMLとCSSを作成しました。それはそれです。私は参考としてthis pageを使用しようとしていますが、まだ苦労しています。

上記のことを行うjQueryコードの例はありますか？

ご協力いただきありがとうございます。

• ジャック

Answer 1

あなたがする必要があるだろう事は、私は、以下のリンクするコードのようになります。 私は何度もこのようなことをしてきましたが、これは私が使ったコードです。ご質問がありましたらお聞かせください。また、より効果的な方法をご存じの方はコメントしてください。私はいつも同様に学びたいと思っています！このような

何か：

function changeBackground() { 
    //Leave the first background alone so that it remains visible. 
    $('#bg2').hide(); 
    $('#bg3').hide(); 
    $('#bg4').hide(); 
    var counter = 0; 
    function changeOnClick() { 
    $('#forward').click(function() { //Code to run when you click forward. 
     if (counter === 0) { 
     $('#bg1').show(); 
     $('#bg2').hide(); 
     $('#bg3').hide(); 
     $('#bg4').hide(); 
     counter = counter + 1; 
     } else if (counter === 1) { 
     $('#bg2').show(); 
     $('#bg1').hide(); 
     $('#bg3').hide(); 
     $('#bg4').hide(); 
     counter = counter + 1; 
     } else if (counter === 2) { 
     $('#bg3').show(); 
     $('#bg1').hide(); 
     $('#bg2').hide(); 
     $('#bg4').hide(); 
     counter = counter + 1; 
     } else if (counter === 3) { 
     $('#bg4').show(); 
     $('#bg1').hide(); 
     $('#bg2').hide(); 
     $('#bg3').hide(); 
     counter = 0; //Reset the counter here. 
     } 
    }); 
    var counter2 = 0; 
    $('#back').click(function() { //Code to run when you click back. 
     if (counter === 0) { 
     counter2 = 3; //Reset the counter here. 
     $('#bg1').show(); 
     $('#bg2').hide(); 
     $('#bg3').hide(); 
     $('#bg4').hide(); 
     } else if (counter === 1) { 
     $('#bg2').show(); 
     $('#bg1').hide(); 
     $('#bg3').hide(); 
     $('#bg4').hide(); 
     counter2 = counter2 - 1; 
     } else if (counter === 2) { 
     $('#bg3').show(); 
     $('#bg1').hide(); 
     $('#bg2').hide(); 
     $('#bg4').hide(); 
     counter2 = counter2 - 1; 
     } else if (counter === 3) { 
     $('#bg4').show(); 
     $('#bg1').hide(); 
     $('#bg2').hide(); 
     $('#bg3').hide(); 
     counter2 = counter2 - 1; 
     } 
    }); 
    }; 
    changeOnClick(); //Remember to call the function. 
}; 
changeBackground(); //Remember to call the function.