如何在html中添加光滑的幻燈片

我是HTML，CSS和JavaScript中的新手。我想在使用jQuery的javascript的網站中添加流暢的幻燈片。目前我的代碼是這樣的。我不知道如何使用jQuery。如何在html中添加光滑的幻燈片

<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 
}

來源

2017-02-19 Mithil Amin

您可以使用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>

來源

2017-02-19 02:31:33

在你的問題已經如作品出現在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開發，或使用bootstrap 3 example如果要重構代碼，或找到更強大的功能carousel.js閱讀，雖然你是很好

來源

2017-02-19 03:20:07 Dom

如何在html中添加光滑的幻燈片

回答

相關問題