jQuery图像滑块故障

Posted 2023-05-08

【中文标题】jQuery图像滑块故障

【英文标题】：jQuery image slider glitch

【发布时间】：2020-10-03 08:27:43

【问题描述】：

当我点击上一个按钮两次时，图片消失，并且滑块不起作用。

这是我的代码： Jsfiddle link 任何帮助将不胜感激。谢谢。

$(document).ready(function() 
    $('.nxt').on('click',function () 
        var currentImg = $('.active');
        var nextImg = currentImg.next();

        if(nextImg.length)
            currentImg.removeClass('active').css('z-index, -10');
            nextImg.addClass('active').css('z-index',10);
        
    );

    $('.pre').on('click',function () 
        var currentImg = $('.active');
        var prevImg = currentImg.prev();

        if(prevImg.length)
            currentImg.removeClass('active').css('z-index, -10');
            prevImg.addClass('active').css('z-index',10);
        

    );
  );

【参考方案1】：

当 currentImg.prev(); 被调用时，它会获取前一个元素，即在您的情况下 id="slider" 的“div”元素。 将图像包装在 div 中，如下所示：-

 <div>
   <img class="active" src="https://i.pinimg.com/564x/57/ab/87/57ab87058782698945270ad9f734ceb5.jpg">
    <img src="https://i.pinimg.com/564x/5f/fe/4c/5ffe4ca66086ec07e64b4a46e0e97026.jpg">
  </div>

查看fiddle here

【讨论】：

对。非常感谢。