javascript - 创建带有显示/隐藏标题的 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.