创建一个带有字幕显示/隐藏的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.