如何在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示例 ，盡管您還算不錯