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

Question

我制作了一个图像滑块，但我遇到了问题。 İ 如果单击下一步按钮，它不会隐藏滑块左侧的图像。

代码在这里：

HTML:

 <section id="slider">
            <div class="arrow">
                <a href="#"> < </a>
                <a href="#"> > </a>
            </div>

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


  </section>

CSS:

section#slider {
  margin-left: 150px;
  border: 3px solid #333;
  width: 1004px;
  height: 575px;
  position: relative;
}

div.slider {
  overflow: hidden;
  width: 960px;
}

div.slider ul {
  list-style-type: none;
  overflow: hidden;
}

div.slider ul li {
  width: 960px;
  float: left;
}

div.slider ul li img {
  width: 960px;
}

div.arrow {
  font-size: 50px;
  position: absolute;
  top: 40%;
}

div.arrow a {
  text-decoration: none;
  background-color: #333;
  color: #999;
  display: inline-block;
  width: 35px;
  height: 70px;
  line-height: 70px;
}

div.arrow a:nth-child(1) {
  margin-left: 20px;
  padding-left: 3px;
}

div.arrow a:nth-child(2) {
  margin-left: 870px;
  padding-left: 3px;
}

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;
  });

});

Answer 1

最简单的方法是跟踪显示的图像，然后通过 CSS 隐藏其余图像。您已经知道包含它的列表项的索引 (liDeger)，因此您可以使用它来显示正确的图像并隐藏所有其他图像。

重要的部分是您希望在滑动开始后立即显示新图像，但仅在滑动结束后隐藏前一张图像。

例如 "next" 箭头：

$('div.arrow a:nth-child(2)').click(function() {
    if (liDeger < toplamLi - 1) {
        liDeger++;

        // Add "active" class to next 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 previous image after the animation
            activeLi.prev().removeClass('active') ;
        });
    }
    return false;
});

而 "previous" 箭头指向另一个方向

$('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;
});

那么你只需要一些 CSS 来隐藏活动图像以外的所有内容：

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

并在 HTML 中的第一个列表项中添加一个 "active" class:

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

工作示例：

http://codepen.io/anon/pen/RRPEWg

Answer 2

仅对 CSS 进行了更改： 1.

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

}

和 2.

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

其余相同

$(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;
  });

});

section#slider {
  margin-left: 150px;
  border: 3px solid #333;
  width: 1004px;
  height: 575px;
  position: relative;
}

div.slider {
  overflow: hidden;
  width: 960px;
  margin: 14px auto 0;
}

div.slider ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0; padding: 0;
}

div.slider ul li {
  width: 960px;
  float: left;
}

div.slider ul li img {
  width: 960px;
}

div.arrow {
  font-size: 50px;
  position: absolute;
  top: 40%;
}

div.arrow a {
  text-decoration: none;
  background-color: #333;
  color: #999;
  display: inline-block;
  width: 35px;
  height: 70px;
  line-height: 70px;
  text-align:center;
}

div.arrow a:nth-child(1) {
  margin-left: 20px;
  padding-left: 3px;
}

div.arrow a:nth-child(2) {
  margin-left: 870px;
  padding-left: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="slider">
  <div class="arrow">
    <a href="#">
      &lsaquo; </a>
        <a href="#"> &rsaquo; </a>
  </div>

  <div class="slider">
    <ul>
      <li class="slides"><img src="http://i.hizliresim.com/o78oE9.jpg"></li>
      <li class="slides"><img src="http://i.hizliresim.com/l1rmEr.jpg"></li>
      <li class="slides"><img src="http://i.hizliresim.com/VYXmEv.jpg"></li>
      <li class="slides"><img src="http://i.hizliresim.com/nrmZEM.jpg"></li>
    </ul>
  </div>


</section>

这是代码笔 link on codepen

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

Hide images outside of view in image slider

javascript

css

jquery

hide

carousel