創建一個帶有字幕顯示/隱藏的jQuery幻燈片

Question

我不熟悉這個論壇和編碼（到目前爲止有四個類），所以我希望如果我看起來完全無能爲力，那麼我會希望你能忍受。

我的任務是使用jQuery創建四張照片的幻燈片。我試圖弄清楚的是如何隱藏除第一個圖像以外的所有圖像，然後在點擊向前或向後按鈕時顯示下一個圖像和/或前一個圖像。然後，我需要在點擊每張照片後顯示/隱藏的每張照片上添加文字說明。

我完全難以理解如何開始爲此創建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.