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），因此您可以使用它来显示正确的图像并隐藏所有其他图像。

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

所以例如＆＃34; next＆＃34;箭头：

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

＆＃34; previous＆＃34;箭头走另一条路

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

并添加＆＃34;有效＆＃34; class到HTML中的第一个列表项：

<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。

[[130 kms, $266.07], [46 kms, $174.14], [169 kms, $187.01], [179 kms, $488.69], [53 kms, $401.53], [128 kms, $106.88], [97 kms, $398.33], [152 kms, $493.87], [20 kms, $205.43], [94 kms, $248.14]]

和2.

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

}

休息是一样的

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

这是代码链on codepen

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

2 个答案: