スムーズなスライドショーを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によって開発された、またはあなたのコードをリファクタリング、またはより堅牢な機能を検索したい場合はbootstrap 3 exampleを使用してcarousel.js通していただくことをおすすめします