Html,css,javascript

#1

Em các anh chị và các bạn, em có một vấn đề về HTML.Vấn đề em đặt ra là: em có một thư mục chứa khoảng 100 cái hình, bây giờ em muốn là hiệu ứng chuyển anh theo khoảng thời gian nhất đinh(ví dụ 2s chuyển 1 cái ảnh). em tham khảo trên mạng thì hầu như giải pháp đưa ra là khai báo 1 mảng chứa ảnh và duyệt từng ảnh một, xin anh chị và các bạn cho em hướng giải quyết,em cảm ơn

#2

Không dùng JS, viết 100 cái tags ra html rồi dùng CSS animation :smile:
Chắc cũng mệt =)))

1 Like
#3

Bạn đặt tên ảnh là số thứ tự hoặc có chứa số thứ tự, ví dụ: 1.jpg, 2.jpg, …
Sau đó đặt 1 biến tăng dần.

#4

Bạn tạo một file HTML rồi dán đoạn code dưới đây vào. Have fun :wink:

<!DOCTYPE html>
<html>
    <head>
        <meta charshet="utf-8" />
        <title>Testing something</title>
        <style>
            .images img {
                display: none;
            }

            .images .active {
                display: block !important;
            }
        </style>
    </head>
    <body>
        <div class="images">
            <img id="0" src="https://static.wixstatic.com/media/a0af7e_e7b845a6c5a84a259d327d89e92643d7.jpg/v1/fill/w_970,h_316,al_c,q_80,usm_0.66_1.00_0.01/a0af7e_e7b845a6c5a84a259d327d89e92643d7.jpg" alt="Image 1">
            <img id="1" src="https://static.wixstatic.com/media/a0af7e_e4baffacbcf04ab08944a8a2bad0369d.jpg/v1/fill/w_970,h_316,al_c,q_80,usm_0.66_1.00_0.01/a0af7e_e4baffacbcf04ab08944a8a2bad0369d.jpg" alt="Image 2">
            <img id="2" src="https://static.wixstatic.com/media/a0af7e_7a899a1c8eeb4d85aabff4e917cc9af6.jpg/v1/fill/w_970,h_316,al_c,q_80,usm_0.66_1.00_0.01/a0af7e_7a899a1c8eeb4d85aabff4e917cc9af6.jpg" alt="Image 3">
        </div>
    </body>

    <script>
        var images = document.getElementsByTagName('img');
        var length = images.length;
        var index = -1;
        var image;

        setInterval(function() {
            image = document.getElementById(index);

            if (image) {
                image.className = '';
            }

            index = ++index % length;
            image = document.getElementById(index);
            image.className = 'active';

        }, 2000);
    </script>
</html>
3 Likes
#5

Em Cảm ơn anh Võ Hoài Nam

#6

Bạn đặt tên ảnh theo thứ tự từ 0 đến hết.
Mình hay dùng chuyển ảnh bằng bootstrap carousel, bạn lên w3schools xem. Mình sẽ dùng 1 vòng lặp for và jquery để nhồi cả trăm cái img vào đúng chỗ.
Nếu bạn chuyển hình bằng code chay thì dùng jquery để đổi attribute của thẻ img là được.

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?