Membangunkan galeri web menggunakan JavaScript-tutorial js-php.cn

Membangunkan galeri web menggunakan JavaScript

PHPz

Lepaskan： 2023-08-09 20:10:43

asal

1137 orang telah melayarinya

Membangunkan galeri web menggunakan JavaScript

Menggunakan JavaScript untuk membangunkan galeri web

Apabila Internet terus berkembang, reka bentuk web telah menjadi lebih halus dan interaktif. Antaranya, galeri ialah elemen reka bentuk web biasa, yang boleh memaparkan berbilang gambar dan menyediakan fungsi penyemakan imbas dan penukaran. Artikel ini menerangkan cara membangunkan galeri web ringkas menggunakan JavaScript dan menyediakan contoh kod.

Pertama, kita perlu menyediakan beberapa sumber imej. Anda boleh mencipta folder yang dipanggil "imej" dalam folder projek anda dan meletakkan semua gambar anda di dalamnya. Di sini kami menggunakan lima gambar sebagai contoh. Selepas sumber imej sedia, kami mula menulis kod JavaScript.

Buat struktur HTML
Kita perlu mencipta struktur HTML untuk memaparkan imej dan menyediakan fungsi penukaran. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>网页画廊</title>
    <style>
        .gallery {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
        }
        
        .gallery img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .controls button {
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="gallery">
        <img id="image" src="images/1.jpg" alt="image">
    </div>
    <div class="controls">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan div dengan kelas "galeri" untuk memegang imej, dan elemen img dengan id "imej" untuk memaparkan imej. Di bawah ialah div dengan kelas "kawalan", yang mengandungi dua butang untuk bertukar kepada gambar sebelumnya dan seterusnya. Dengan cara ini kita mencipta struktur HTML asas.

Tulis logik JavaScript
Seterusnya, kita perlu menulis kod JavaScript untuk melaksanakan fungsi penukaran imej. Cipta fail bernama "script.js" dalam folder projek dan tulis kod berikut:

// 获取元素
const image = document.getElementById("image");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");

// 图片列表
const images = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"];

// 当前显示的图片索引
let currentIndex = 0;

// 切换到上一张图片
prevBtn.addEventListener("click", () => {
    currentIndex--;
    if (currentIndex < 0) {
        currentIndex = images.length - 1;
    }
    image.src = images[currentIndex];
});

// 切换到下一张图片
nextBtn.addEventListener("click", () => {
    currentIndex++;
    if (currentIndex >= images.length) {
        currentIndex = 0;
    }
    image.src = images[currentIndex];
});

Salin selepas log masuk

Dalam kod di atas, kita mula-mula mendapatkan elemen yang perlu dikendalikan melalui kaedah getElementById, iaitu elemen img dan dua butang . Kemudian, kami mentakrifkan imej tatasusunan yang mengandungi laluan semua imej dan memulakan indeks imej yang sedang dipaparkan kepada 0.

Seterusnya, tambahkan pendengar acara klik pada butang prevBtn melalui kaedah addEventListener. Apabila butang diklik, currentIndex dikurangkan sebanyak 1 dan menyemak sama ada indeks kurang daripada 0. Jika ya, tetapkan currentIndex kepada nilai indeks elemen terakhir tatasusunan imej, iaitu, untuk melaksanakan penukaran gelung. Akhir sekali, tetapkan atribut src elemen img ke laluan imej yang sepadan dengan indeks semasa.

Seterusnya, kami menambah pendengar acara klik yang serupa pada butang nextBtn. Apabila butang diklik, currentIndex dinaikkan sebanyak 1 dan menyemak sama ada indeks melebihi panjang tatasusunan imej. Jika ya, tetapkan currentIndex kepada 0 untuk melaksanakan penukaran gelung. Akhir sekali, tetapkan juga atribut src elemen img ke laluan imej yang sepadan dengan indeks semasa.

Jalankan halaman web
Selepas melengkapkan langkah di atas, simpan fail dan buka fail HTML dalam penyemak imbas. Kini kita boleh menggunakan butang sebelumnya dan seterusnya untuk menukar gambar yang dipaparkan. Cuba klik butang untuk melihat sama ada anda boleh menukar gambar seperti biasa.

Ringkasan
Di atas ialah contoh mudah menggunakan JavaScript untuk membangunkan galeri web. Dengan menukar atribut src unsur img secara dinamik, kita boleh melaksanakan fungsi penukaran imej. Ini hanyalah contoh asas, anda boleh memanjangkannya lagi, seperti menambah pramuat imej, zum, dsb. Saya harap artikel ini boleh memberi anda inspirasi, dan saya berharap anda mendapat hasil yang lebih baik dalam reka bentuk web!

Atas ialah kandungan terperinci Membangunkan galeri web menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!