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剪辑它。然后，为您创建的“视口”设置动画。

进度条不是应该的地方

1 个答案: