30/09/2018, 19:18

Html,css,javascript

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

Trịnh Tâm viết 21:30 ngày 30/09/2018

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

null viết 21:23 ngày 30/09/2018

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.

Võ Hoài Nam viết 21:28 ngày 30/09/2018

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

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

Truong Tran viết 21:19 ngày 30/09/2018

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

Giang Nguyen viết 21:33 ngày 30/09/2018

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.

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Truong Tran

0 chủ đề

0 bài viết

Tác giả nổi bật