Javascript 创建带有显示/隐藏标题的jQuery幻灯片

我对这个论坛和编码（到目前为止有四门课）都是新手，所以如果我看起来完全不懂的话，我希望你能容忍我

我的任务是使用jQuery创建四张照片的幻灯片。我想弄清楚的是，如何隐藏除第一张图像外的所有图像，然后在单击“前进”或“后退”按钮时显示下一张图像和/或上一张图像。然后，我需要在每张照片上添加文本标题，在点击每张照片时显示/隐藏

我完全不知道如何开始为此创建jQuery代码。我已经创建了我的HTML和CSS，仅此而已。我一直试图用它作为参考，但仍在努力

有没有人有一个jQuery代码的例子，可以完成我提到的这些事情，他们愿意与我分享，让我开始学习

非常感谢你的帮助

• 江淮

---

您需要做的事情看起来与下面我将链接的代码类似。 我已经做过很多次类似的事情，这就是我使用的代码。如果你有任何问题，请询问，或者如果有人知道一个更有效的方法，请评论，我总是期待学习以及

大概是这样的：

 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. 

---

你需要做的事情看起来像下面我链接的代码。 我已经做过很多次类似的事情，这就是我使用的代码。如果你有任何问题，请询问，或者如果有人知道一个更有效的方法，请评论，我总是期待学习以及

大概是这样的：

 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. 

---

您链接的页面似乎是一个不错的入门示例；你在看剧本中的评论，对吗？更一般的建议是：试着把问题分解成更小的部分，然后一次解决一个问题。例如：想一想可能的方法只让一个图像可见。改变它的css类？更改其父级的类？在视口中移动它？有很多选择；如果搜索“carousel”，您可以在Codepen.io之类的地方找到它们的示例。至于控件，您是否可以在页面上放置一个按钮，在您单击时增加一个数字？而另一个会减少它？这是一个开始！您链接的页面似乎是一个不错的入门示例；你在看剧本中的评论，对吗？更一般的建议是：试着把问题分解成更小的部分，然后一次解决一个问题。例如：想一想可能的方法只让一个图像可见。改变它的css类？更改其父级的类？在视口中移动它？有很多选择；如果搜索“carousel”，您可以在Codepen.io之类的地方找到它们的示例。至于控件，您是否可以在页面上放置一个按钮，在您单击时增加一个数字？而另一个会减少它？这是一个开始！这会有用的，但它相当笨重。寻找减少代码自身重复次数的方法-例如，如果设置计数器总是显示名为

bg[计数器编号]

（

3

显示

bg3

，

4

显示

bg4

，等等），则不需要每次都指定什么，对吗？您只需参考

计数器的值

。你将不得不调整你的选择器，你可以做更多的事情来优化它，但从那开始，看看它是如何运行的。这会起作用，但它相当笨重。寻找减少代码自身重复次数的方法-例如，如果设置计数器总是显示名为

bg[计数器编号]

（

3

显示

bg3

，

4

显示

bg4

，等等），则不需要每次都指定什么，对吗？您只需参考

计数器的值

。你必须调整你的选择器，你可以做更多的事情来优化它，但从那开始，看看它是如何进行的。