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

Question

I am new in HTML, CSS and JavaScript. I want to add smooth slideshow in the website using javascript of jQuery. Currently my code is like this. I don't know how to use 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>

And I use JavaScript like this.

    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

You can use opacity instead, and use CSS transitions to make it smooth. Though that requires absolutely positioning the images instead, and then the parent will no longer match the height of the image, so you can set the container height to match the current image, and transition that, too.

 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

The code in your question already works as seen in the jsfiddle added to the question.
This was the javascript in your question when I went to look for any reasons why this wouldn't work.

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
}

and it worked fine.

I'd recommend reading through the carousel.js developed by ksylvest , or using the bootstrap 3 example if you want to refactor your code, or find more robust features, though you are pretty well