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过渡使其流畅。虽然这需要绝对定位图像，然后父图像将不再匹配图像的高度，因此您可以设置容器高度以匹配当前图像，并转换它。

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>

Answer 2

问题中的代码已经按照jsfiddle添加到问题中的方式运行当我去寻找任何无法解决的问题时，这就是你问题中的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
}

它工作正常。

我建议您阅读由ksylvest开发的carousel.js，或者如果您想重构代码，请使用bootstrap 3 example，或者找到更强大的功能，尽管您很好

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

2 个答案: