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.

使用显示/隐藏的标题创建jQuery幻灯片

1 个答案: