javascript - 如何在html中添加流畅的幻灯片

Question

我是 HTML、CSS 和 JavaScript 的新手。我想使用 jQuery 的 javascript 在网站上添加流畅的幻灯片。目前我的代码是这样的。我不知道如何使用 jQuery。

<div class="col-md-6">
    <div class="story_image wow slideInLeft" data-wow-duration="2s">
         <img src="images/1.jpg" alt="" class="mySlides">
         <img src="images/2.jpg" alt="" class="mySlides">
         <img src="images/3.jpg" alt="" class="mySlides">
         <img src="images/4.jpg" alt="" class="mySlides">
         <img src="images/5.jpg" alt="" class="mySlides">
    </div>
</div>

我是这样使用 JavaScript 的。

    var myIndex = 0;
    carousel();

    function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 3000); // Change image every 2 seconds
}

Answer 1

您可以改用opacity，并使用CSS transitions 使其平滑。虽然这需要绝对定位图像，然后父级将不再匹配图像的高度，因此您可以设置容器高度以匹配当前图像，并对其进行转换。

var myIndex = 0,
    container = document.getElementsByClassName('story_image')[0];

carousel();

function carousel() {
  var i,
      el,
      x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.opacity = "0";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  el = x[myIndex - 1];
  container.style.height = el.height + 'px';
  setTimeout(function() {
    el.style.opacity = "1";
    setTimeout(carousel, 3000);
  },500);
}

.story_image {
  position: relative;
  transition: height .5s;
  background: #eee;
}
.mySlides {
  position: absolute;
  top: 0; left: 0;
  transition: opacity .5s;
}

<div class="col-md-6">
    <div class="story_image wow slideInLeft" data-wow-duration="2s">
         <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" class="mySlides">
         <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" class="mySlides">
         <img src="http://www.jqueryscript.net/images/Dynamic-Horizontal-Vertical-Image-Slider-Plugin-slideBox.jpg" alt="" class="mySlides">
    </div>
</div>