Question

大家。我的滑块遇到了问题。它完美无瑕地工作，但是当我刷新页面的那一刻，我可以看到在我们的滑块中消失之前所有图像的ms。有没有办法确保在刷新时，它们不会被看到？

[Bootply示例] [1]

（在这个例子中没关系，但在我的真实页面上，有更大的延迟）

HTML

<div class="container">
  <div class="col-md-7">

    <div class="col-md-2">
      <a href="#" class="control_next">&gt;&gt;</a>
    </div>

    <div class="col-md-8">
      <div id="slider">
        <ul>
          <li>SLIDE 1</li>
          <li style="background: #aaa;">SLIDE 2</li>
          <li>SLIDE 3</li>
          <li style="background: #aaa;">SLIDE 4</li>
        </ul>  
      </div>
    </div>

    <div class="col-md-2">
        <a href="#" class="control_prev">&lt;</a>
    </div>


  </div>

  <div class="col-md-5">
  </div>
</div>

CSS

/ *这里使用的CSS将在bootstrap.css * /

之后应用

.container{
    background-color: green;
    width: 1380px;
}

#slider {
  position: relative;
  overflow: hidden;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}



a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

Answer 1

我自己找到了答案。

我在开始时将css属性 display：none 设置为所有滑块图像，除了我想先看到的那个，当按下左/右滑块箭头时，我只是将显示值更改为内联（使用jquery）（在我的情况下所有li子元素）。

在滑块中查看ms图片

1 个答案: