Javascript 在图像滑块中隐藏视图外的图像

我做了一个图像滑块，但我有一个问题。İ如果单击“下一步”按钮，它不会隐藏滑块左侧的图像

代码如下：

HTML:

jQuery：

$(document).ready(function() {
  var liWidth = $('div.slider ul li').width();
  var toplamLi = $('div.slider ul li').length;
  var toplamWidth = liWidth * toplamLi;
  var liDeger = 0;

  $('div.slider ul').css({
    width: toplamWidth + "px"
  });

  $('div.arrow a:nth-child(2)').click(function() {
    if (liDeger < toplamLi - 1) {
      liDeger++;
      toplamWidth = liDeger * liWidth;
      $('div.slider ul').animate({
        marginLeft: '-' + toplamWidth + "px"
      }, 500);
    }
    return false;
  });

  $('div.arrow a:nth-child(1)').click(function() {
    if (liDeger > 0) {
      liDeger--;
      toplamWidth = liDeger * liWidth;
      $('div.slider ul').animate({
        marginLeft: '-' + toplamWidth + "px"
      }, 500);
    }
    return false;
  });

});

$（文档）.ready（函数（）{
var liWidth=$（'div.slider ul li'）.width（）；
变量toplamLi=$（'div.slider ul li'）。长度；
var toplamWidth=liWidth*toplamLi；
var-lidger=0；
$（'div.slider ul'）.css({
宽度：顶面宽度+px
});
$（'div.arrow a:n子级（2）'）。单击（函数（）{
if（lidger0）{
利德格--；
toplamWidth=Lidger*liWidth；
$（'div.slider ul'）。设置动画({
边缘左侧：'-'+toplamWidth+“px”
}, 500);
}
返回false；
});
});

最简单的方法是跟踪显示的图像，并通过CSS隐藏其余图像。您已经知道包含它的列表项的索引（

lidger

），因此可以使用该索引显示正确的图像并隐藏所有其他图像

重要的是，您希望在滑动开始时立即显示新图像，但仅在滑动结束后隐藏上一个图像

例如，“下一个”箭头：

然后，您只需要一些CSS来隐藏除活动图像以外的所有内容：

div.slider ul li {
    visibility: hidden;
} 
div.slider ul li.active {
    visibility: visible;
}

并将“活动”类添加到HTML中的第一个列表项：

<div class="slider">
    <ul>
        <li class="slides active"><img src="resimler/resim1.jpg"></li>
    ...
</div>

...

工作示例：

仅对CSS进行的更改： 一,

二,

div.slider {
  margin: 14px auto 0; //added
}

其余的都一样

$（文档）.ready（函数（）{
var liWidth=$（'div.slider ul li'）.width（）；
变量toplamLi=$（'div.slider ul li'）。长度；
var toplamWidth=liWidth*toplamLi；
var-lidger=0；
$（'div.slider ul'）.css({
宽度：顶面宽度+px
});
$（'div.arrow a:n子级（2）'）。单击（函数（）{
if（lidger0）{
利德格--；
toplamWidth=Lidger*liWidth；
$（'div.slider ul'）。设置动画({
边缘左侧：'-'+toplamWidth+“px”
}, 500);
}
返回false；
});
});
section#滑块{
左边距：150像素；
边框：3px实心#333；
宽度：1004px；
身高：575px；
位置：相对位置；
}
分区滑块{
溢出：隐藏；
宽度：960px；
利润率：14px自动0；
}
第二部分{
列表样式类型：无；
溢出：隐藏；
边距：0；填充：0；
}
李国荣分区{
宽度：960px；
浮动：左；
}
第二部分{
宽度：960px；
}
箭头{
字体大小：50px；
位置：绝对位置；
最高：40%；
}
箭头a部分{
文字装饰：无；
背景色：#333；
颜色：#999；
显示：内联块；
宽度：35px；
高度：70像素；
线高：70px；
文本对齐：居中；
}
分区箭头a:第n个子项（1）{
左边距：20px；
左：3倍；
}
分区箭头a:第n个子项（2）{
左边距：870像素；
左：3倍；
}







谢谢您的帮助：）
$('div.arrow a:nth-child(1)').click(function() {
    if (liDeger > 0) {
        liDeger--;

        // Add "active" class to previous image
        var activeLi = $('.slider li').eq(liDeger);
        activeLi.addClass('active');

        toplamWidth = liDeger * liWidth;
        $('div.slider ul').animate({
            marginLeft: '-' + toplamWidth + "px"
        }, 500, function() {
            // Remove "active" class from next image after the animation
             activeLi.next().removeClass('active') ;
        });
    }
    return false;
});

div.slider ul li {
    visibility: hidden;
} 
div.slider ul li.active {
    visibility: visible;
}

<div class="slider">
    <ul>
        <li class="slides active"><img src="resimler/resim1.jpg"></li>
    ...
</div>

div.slider ul {
    margin: 0; padding: 0; //added

}

div.slider {
  margin: 14px auto 0; //added
}