如何在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过渡使其平滑。 尽管这需要绝对定位图像，但是父对象将不再与图像的高度匹配，因此您可以将容器高度设置为与当前图像匹配，并进行过渡。

 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示例 ，尽管您还算不错