javascript - 进度条不在应有的位置

Question

我有两个问题被卡住了。在这里实时查看http://codepen.io/riwakawebsitedesigns/pen/fvwGC/

第一次查询:我有这个进度条，但我似乎无法在我的图像底部找到它这是 css。

第二个查询:在我的 Javascript 上，我希望图像向左滑动，当它随着进度条消失时我该怎么做

code for first query

.slideshow {
  position:relative;
}

.slideshow-inner {
  position:relative;
}

.slideshow-inner img {
  position:absolute;
}

.progress-bar {
  background-image: -webkit-linear-gradient(#383838 0%, #505050 100%);
  background-image: -moz-linear-gradient(#383838 0%, #505050 100%);
  background-image: -o-linear-gradient(#383838 0%, #505050 100%);
  background-image: linear-gradient(#383838 0%, #505050 100%); 
  margin: 0;
  padding: 0;
  height: 20px;
  position:relative;
  width: 0%;
}

第二次查询的代码

<script type="text/javascript">
  var currentIndex = 0;
  function progress() {
    $(".slideshow img").hide();
    $(".slideshow img").eq(currentIndex).show();
    $(".progress-bar").css("width", "0");

    currentIndex++;
    if (currentIndex > 2) {
    currentIndex = 0;
    }

    $('.slideshow-bar').animate({
      width: '100%'
    }, 5000, "linear", progress);
  }
  progress();
</script>

HTML 代码

<div class="page-wrapper">
  <div class="slideshow">
    <div class="slideshow-inner">
      <img data-src="holder.js/100%x280/grey" >
    </div>
    <div class="slideshow-inner">
      <img data-src="holder.js/100%x280/sky">
    </div>
    <div class="slideshow-inner">
      <img data-src="holder.js/100%x280/vine">
    </div>
    <div class="slideshow-inner">
      <img data-src="holder.js/100%x280/lava">
    </div>
    <div class="progress-bar"></div>
  </div>
</div>

Answer 1

第一个问题:通过对图像使用 position:absolute，您将它们从文档流中移除并导致进度条位于顶部(因为图像不再存在以将其向下推)。要修复，只需将 position:absolute 更改为 position:relative(或者甚至完全删除 position)。

第二个问题:您需要重组 HTML 以拥有一个比实际显示区域更宽的“容器”。显示区域将使用overflow:hidden 对其进行裁剪。然后，为您创建的“视口(viewport)”设置动画。