创建一个自动滑块答案

【问题标题】：Create an automatic slider创建一个自动滑块
【发布时间】：2017-01-23 12:06:08
【问题描述】：

我为滑块创建了这段代码。当我悬停缩略图图像时，它会显示图像，但我需要创建一个自动滑块。我怎样才能做到这一点？ /************************************************* ****************************************************** ***/

.sliderconteainer {
  width: 100%;
  position: relative;
  border: 2px double silver;
  border-radius: 5px;
}

.thmbnail {
  width: 25%;
  height: 100px;
  float: left;
}

.slide {
  width: 100%;
  height: 300px;
  position: absolute;
  float: right;
  left: 0;
  top: 0;
  opacity: 0;
}

.slide img {
  height: 300px;
  width: 100%;
}

.thmbnail img {
  width: 100%;
  height: 95%;
  border: 2px solid #EEEEEE;
  border-radius: 5px;
}

.content-placeholder {
  width: 100%;
  height: 300px;
}

.info {
  background-color: black;
  z-index: 99;
  margin-top: -66px;
  position: absolute;
  width: 100%;
  padding-right: 10px;
  opacity: .75;
  border-radius: 5px;
}

.info p {
  color: #ABB3BD;
  font-family: 'B Mitra';
}

.info h5 {
  font-family: 'B Titr';
  color: #ffffff;
}

.thmbnail:hover .slide {
  opacity: 1;
}
.thmbnail:hover .thmbnail img {
  border: 2px solid #56656E;
}

#main {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class=" sliderconteainer col-md-5 col-sm-5">
    <div class="content-placeholder"></div>
    <div class="thmbnail">
      <div class="slide">
        <img src="~/Image/SiteDesign/profile.jpg" class="img-responsive"/>
        <div class="info">
          <h5>عنوان برای اسلید اول</h5>
          <p>توضیحالت اسلاید دوم</p>
        </div>
      </div>
      <img src="~/Image/SiteDesign/profile.jpg"/>
    </div>
    <div class="thmbnail">
      <div class="slide">
        <img src="~/Image/Slider/8.jpg"/>
        <div class="info">
          <h5>عنوان برای اسلید اول</h5>
          <p>توضیحالت اسلاید دوم</p>
        </div>
      </div>
      <img src="~/Image/Slider/8.jpg"/>
    </div>
    <div class="thmbnail">
      <div class="slide">
        <img src="~/Image/Slider/image-slider-2.jpg"/>
        <div class="info">
          <h5>عنوان برای اسلید اول</h5>
          <p>توضیحالت اسلاید دوم</p>
        </div>
      </div>
      <img src="~/Image/Slider/image-slider-2.jpg"/>
    </div>
    <div class="thmbnail ">
      <div class="slide">
        <img src="~/Image/Slider/Megumi-4565.jpg"/>
        <div class="info">
          <h5>عنوان برای اسلید اول</h5>
          <p>توضیحالت اسلاید دوم</p>
        </div>
      </div>
      <img src="~/Image/Slider/Megumi-4565.jpg"/>
    </div>
  </div>
</div>

【问题讨论】：

不要重新发明轮子。那里有大量的滑块插件。

标签： javascript jquery css slider

【解决方案1】：

如果你想自动改变，你可以使用内置的JavaScript函数setInterval(xfunction, xInterval)，它调用xFunction，每个xInterval

setInterval(function() {
  console.log("MOVE IT");
  moveLeft();
}, 1000);

正如@dennis-koch 所提到的，我还想看看您可以用于滑块的插件。

【讨论】：