Question

我根据本教程here创建了一个简单的图像滑块。看起来像这样：

var currentIndex = 0,
          items = $('.container div'),
          itemAmt = items.length;

        function cycleItems() {
          var item = $('.container div').eq(currentIndex);
          items.hide();
          item.css('display', 'inline-block');
        }

        var autoSlide = setInterval(function() {
          currentIndex += 0;
          if (currentIndex > itemAmt - 1) {
            currentIndex = 0;
          }
          cycleItems();
        }, 3000);

        $('.next').click(function() {
          clearInterval(autoSlide);
          currentIndex += 1;
          if (currentIndex > itemAmt - 1) {
            currentIndex = 0;
          }
          cycleItems();
          slide();
        });

        $('.prev').click(function() {
          clearInterval(autoSlide);
          currentIndex -= 1;
          if (currentIndex < 0) {
            currentIndex = itemAmt - 1;
          }
          cycleItems();
          slide();
        });

.container {
  width: 100%;
  height: 100%;
}
.container div {
  display: inline-block;
  display: none;
}
.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.galer-btn {
  position: absolute;
  z-index: 2;
  top: 50%;
}
.next {
  right: 40px;
  padding: 20% 2% 20% 40%;
  margin: -20% -1%;
}
.prev {
  left: 40px;
  padding: 20% 40% 20% 2%;
  margin: -20% -2%;
}
.fa {
  font-size: 4vw;
  color: #ffd2cf;
}
.fa:hover {
  cursor: pointer;
  -webkit-animation: bounceright .3s alternate ease infinite;
  animation: bounceright .3s alternate ease infinite;
}

<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
  <section class="about">
    <i class="fa fa-chevron-right galer-btn next"></i>
    <i class="fa fa-chevron-left galer-btn prev"></i>
    <div class="container">
      <div style="display: inline-block;">
        <img src="https://placeimg.com/1000/600/tech" />
      </div>
      <div>
        <img src="https://placeimg.com/1000/600/tech" />
      </div>
      <div>
        <img src="https://placeimg.com/1000/600/tech" />
      </div>
      <div>
        <img src="https://placeimg.com/1000/600/tech" />
      </div>
    </div>
  </section>
</body>

</html>

结果为我提供了全屏图像滑块，在教程中可以自动滑动，但我已设法通过在javascript代码中将currentIndex += 1;更改为currentIndex += 0;来禁用它。顺便说一句，欢迎任何有关如何正确移除自动滑动的建议。

然而，主要问题是如何在淡出等图像之间添加一些过渡效果？

此外，对于左右按钮，我只使用了FontAwesome图标，它有点有用，但有些东西告诉我可能不是最好的方法..我应该使用<button>还是smthn？

到目前为止，我只学习HTML和CSS，javascript（或jQuery）现在对我来说是一个完全的谜，所以我感谢任何帮助。

如何将过渡效果添加到jQuery图像滑块？

0 个答案: