Question

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

.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>

Answer 1

如果您想自动更改内容，可以使用内置JavaScript函数setInterval(xfunction, xInterval)，每xFunction次调用xInterval

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

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

创建一个自动滑块

1 个答案: