在滑块中查看 ms 图片答案

【问题标题】：Seeing for a ms pictures in slider在滑块中查看 ms 图片
【发布时间】：2017-05-31 07:04:34
【问题描述】：

每个人。我的滑块有问题。它完美无缺，但是当我刷新页面的那一刻，我可以在几毫秒内看到滑块中的所有图像，然后它们就会消失。有没有办法确保在刷新时不会看到它们？

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

【问题讨论】：

标签： jquery css slider

【解决方案1】：

我自己找到了答案。

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

【讨论】：