Jquery 如何让下面的“上一个”和“下一个”按钮在循环中显示下一个和上一个图像

如何让下面的“上一个”和“下一个”按钮在循环中显示下一个和上一个特征图像以及相关的拇指图像

以下是一个循环：

 <?php 
$array = array(
    $productNumber = 1,
    $btnPrevNumber = 1,
    $btnNxtNumber = 1,
    $thumbNumber = 1); ?>


    <div class="pre pre<?php echo $nxtNumber++; ?>">
      <h2>previous</h2>
    </div>

    <div class="next next<?php echo $nxtNumber++; ?>">
      <h2>next</h2>
    </div>

   <!--featured images-->
    <div class="collection-img collection-img<?php echo $productNumber++; ?>"></div>

   <!--thumbs images-->
    <div class="col-thumb col-thumb<?php echo $thumbNumber++; ?>">
    </div>

您需要显示更多的HTML。很有可能您甚至不需要一组以上的
pre
和
next
按钮。还有一个一般提示：如果您发现自己为变量名之类的事情编号，那么您已经做错了。这总是正确的，与所使用的编程语言无关。你不需要CSS类
thing1
到
thing50
，这违背了CSS的全部目的。这甚至是有害的，因为这种事情会让你开始复制粘贴代码，就像你在这里做的那样。解决一项任务总有比使用“编号”/“计数”变量更好的方法，所以下次注意到这种模式时，请尽早停下来思考。因为现在的问题看起来完全不同了，我猜我的答案不再相关了
for(let y = 1; y <= 50; y++){
$(".col-thumb"+y).click(function(){
$(".collection-img").fadeOut(); 
$(".collection-img"+y).fadeIn("slow");
 });
}