如何实现图片滑块中当前选中图片的前后图片正确显示？

我来帮你搞定这个图片滑块的左右显示问题～你的核心问题出在左右图片的索引计算错误，以及没处理循环显示的边界情况（比如第一张的左边应该是最后一张，最后一张的右边应该是第一张）。下面给你修正方案和详细解释：

问题分析 #

原代码里的两个关键错误：

• 右侧图片用了slides[slideIndex + 1].src，但slideIndex是从1开始的，图片数组slides是0索引，这会导致索引越界或者指向错误图片
• 左侧图片用了slides[slideIndex].src，索引逻辑完全不对，没对应到当前图片的上一张
• 没处理循环边界：处于第一张时左侧要显示最后一张，处于最后一张时右侧要显示第一张

修正后的JavaScript代码 #

var slideIndex = 1;
showSlides(slideIndex);

function currentSlide(n){
 showSlides(slideIndex = n);
}

function moveSlide(n){
 showSlides(slideIndex += n);
}

function showSlides(n){
 var i;
 var slides = $("ul li img");
 var slidesLength = slides.length;
 var leftImage = $("#leftimg");
 var rightImage = $("#rightimg");

 // 保留循环逻辑：超出范围时重置索引
 if(n > slidesLength) { slideIndex = 1; }
 if(n < 1) { slideIndex = slides.length; }

 // 隐藏所有图片
 for(i = 0; i < slidesLength; i++){
  slides[i].style.display = "none";
 }

 // 显示中间当前图片（这部分原代码是对的）
 slides[slideIndex - 1].style.display = "block";

 // 计算左右图片的正确索引（重点修正！）
 var leftIndex = (slideIndex - 2 + slidesLength) % slidesLength;
 var rightIndex = slideIndex % slidesLength;

 // 给左右图片赋值
 leftImage.attr("src", slides[leftIndex].src);
 rightImage.attr("src", slides[rightIndex].src);
}

关键修正点解释 #

1. 索引计算逻辑优化：

   • 左侧图片索引：(slideIndex - 2 + slidesLength) % slidesLength
     • slideIndex-2：因为中间图片是slideIndex-1，上一张就是它的前一位
     • 加slidesLength再取模：避免出现负数索引（比如slideIndex=1时，1-2=-1，加5变成4，取模5还是4，刚好对应最后一张）
   • 右侧图片索引：slideIndex % slidesLength
     • 中间图片是slideIndex-1，下一张就是slideIndex，取模后当slideIndex等于总长度时，结果为0，对应第一张图片

2. 额外的HTML结构小建议：
   原代码里image-right放在image-center内部，可能导致布局混乱，建议调整成同一层级，同时给按钮加上点击事件：

   <div class="slider">
    <div class="image-container">
     <!-- Left Pic -->
     <div class="image-left">
      <img id="leftimg" src=""/>
      <a class="prev" onclick="moveSlide(-1)">&lang;</a>
     </div>
     <!-- Center Pic -->
     <div class="image-center">
      <ul>
       <li><img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg" class="active"/></li>
       <li><img src="http://www.encyclopedia.com/sites/default/files/5/2799991.jpg" /></li>
       <li><img src="http://r.ddmcdn.com/s_f/o_1/cx_297/cy_0/cw_1201/ch_1201/w_720/APL/uploads/2014/08/wild-animal-safari-zebra-5371037.jpg" /></li>
       <li><img src="https://dingo.care2.com/pictures/causes/3215/3214061.large.jpg" /></li>
       <li><img src="https://upload.wikimedia.org/wikipedia/commons/7/7f/Equus_grevyi_1.jpg" /></li>
      </ul>
     </div>
     <!-- Right Pic-->
     <div class="image-right">
      <img id="rightimg" src=""/>
      <a class="next" onclick="moveSlide(1)">&rang;</a>
     </div>
    </div>
   </div>
   

这样调整后，左右容器就能正确显示当前图片的上一张和下一张，循环切换的逻辑也能正常工作啦～

内容的提问来源于stack exchange，提问作者Cyberstaker