删除幻灯片之间的空格

Question

我正在制作一个 jQuery 图像滑块。滑块工作得很好，但我不想要幻灯片之间的空白。我怎样才能摆脱它们？

window.onload = function slider() {
    $(".slider #1").show("fade", {
        direction: 'left'
    }, 500);
    $(".slider #1").delay(5000).hide("slide", {
        direction: 'left'
    }, 500);

    var sc = $(".slider img").size();
    var count = 2;
    var margin = $(".slider").width();

    setInterval(function() {
        $(".slider #" + count).show("slide", {
            direction: 'right'
        }, 500);
        $(".slider #" + count).delay(5000).hide("slide", {
            direction: 'left'
        }, 500);

        if (count == sc) {
            count = 1;
        } else {
            count = count + 1;
        }
    }, 6500);
}

.img-style {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.slider {
    height: 400px;
    overflow: hidden;
}
.slider img {
    display: none;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
    <div class="row " style="width:100%;margin-left:0px;" id="main">
        <div class="slider" id="slide-for">
            <img id="1" class="img-style" src="http://lorempixel.com/400/200/abstract/1/" />
            <img id="2" class="img-style" src="http://lorempixel.com/400/200/abstract/2/" />
            <img id="3" class="img-style" src="http://lorempixel.com/400/200/abstract/3/" />
            <img id="4" class="img-style" src="http://lorempixel.com/400/200/abstract/4/" />
            <img id="5" class="img-style" src="http://lorempixel.com/400/200/abstract/5/" />
            <img id="6" class="img-style" src="http://lorempixel.com/400/200/abstract/6/" />
        </div>
    </div>
</div>

查看JSFiddle。

Answer 1

绝对定位可以解决问题。

window.onload = function slider() {
  
  $(".slider #1").show("fade", {
    direction: 'left'
  }, 500);

  var sc = $(".slider img").size();
  var count = 1;
  var margin = $(".slider").width();

  setInterval(function() {
    $(".slider #" + count).toggle("slide", {
      direction: 'left'
    }, 500);

    if (count == sc) {
      count = 1;
    } else {
      count = count + 1;
    }

    $(".slider #" + count).toggle("slide",  {
      direction: 'right'
    }, 500);
  }, 6500);

}

.img-style {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slider {
  height: 400px;
  overflow: hidden;
}
.slider img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
  <div class="row " style="width:100%;margin-left:0px;" id="main">
    <div class="slider" id="slide-for">
      <img id="1" class="img-style" src="http://lorempixel.com/400/200/abstract/1/" />
      <img id="2" class="img-style" src="http://lorempixel.com/400/200/abstract/2/" />
      <img id="3" class="img-style" src="http://lorempixel.com/400/200/abstract/3/" />
      <img id="4" class="img-style" src="http://lorempixel.com/400/200/abstract/4/" />
      <img id="5" class="img-style" src="http://lorempixel.com/400/200/abstract/5/" />
      <img id="6" class="img-style" src="http://lorempixel.com/400/200/abstract/6/" />
    </div>
  </div>
</div>