Slide ảnh tự động

Trong bài thực hành này, chúng ta sẽ tạo một slide hình ảnh chạy tự động bằng HTML, CSS và JavaScript.

Slide ảnh tự động

Xem kết quả

Cách tạo slide ảnh tự động

Bước 1) Thêm HTML:

Ví dụ

<div class="myContainer">
    <div class="slide">
        <img src="/images/picture_1.jpg" />
    </div>
    ...
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho vùng chứa slide ảnh */
.myContainer {
    border:5px solid red;
    position:relative;
    height:200px;
    margin:auto;
    width:100%;
    overflow:hidden;
}
/* Tạo kiểu cho các lớp ảnh */
.myContainer .slide {
    width:25%;
    height:300px;
    -webkit-transition:all 0.5s;
    position:absolute;
    top:0;
    left:100%;
}
/* Bố trí các slide ban đầu */
.myContainer .slide:first-child {
    left:0;    
}
.myContainer .slide:nth-child(2) {
    left:25%;    
}
.myContainer .slide:nth-child(3) {
    left:50%;    
}
.myContainer .slide:nth-child(4) {
    left:75%;    
}
.myContainer .slide img {
    width:100%;
    height:200px;
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
runSlide();
/* Định nghĩa hàm tạo auto slide show */
function runSlide() {
    var prev, next, slide, slideIndex = 1;
    
    setInterval(function() {
        prev = document.getElementsByClassName('prev')[0];
        next = document.getElementsByClassName('next')[0];
        slide = document.getElementsByClassName('slide');
        slide[slideIndex - 1].style.left = "-25%";
        slide[slideIndex].style.left = "0";
        slide[slideIndex + 1].style.left = "25%";
        slide[slideIndex + 2].style.left = "50%";
        slide[slideIndex + 3].style.left = "75%";
        slideIndex++;
        if(slideIndex >= slide.length - 3) {
            setTimeout(function() {
                for(var i = 0; i < slide.length; i++) {
                    slide[i].style.left = "100%";
                }
                slideIndex = 1;
                slide[slideIndex - 1].style.left = "0";
                slide[slideIndex].style.left = "25%";
                slide[slideIndex + 1].style.left = "50%";
                slide[slideIndex + 2].style.left = "75%";    
            },1000);
        }    
    },1000);
}
</script>