HTML, CSS dan jQuery: Cipta karusel dengan kesan pudar-tutorial js-php.cn

HTML, CSS dan jQuery: Cipta karusel dengan kesan pudar

王林

Lepaskan： 2023-10-25 12:27:16

asal

1522 orang telah melayarinya

HTML, CSS dan jQuery: Cipta karusel dengan kesan pudar

HTML, CSS dan jQuery: Cipta karusel dengan kesan fade-in dan fade-out

Dengan populariti Internet, karusel telah menjadi salah satu elemen biasa dalam reka bentuk web. Ia bukan sahaja boleh digunakan untuk memaparkan berbilang gambar atau maklumat produk, ia juga boleh meningkatkan pengalaman visual pengguna dengan menukar gambar secara dinamik. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta karusel dengan kesan fade-in dan fade-out.

Pertama, kita perlu mencipta struktur HTML. Tambahkan bekas <div> dalam teg <code> dan tetapkan ID unik untuknya, seperti <div id="slideshow">. Dalam bekas ini, kita boleh menambah berbilang elemen <code><img alt="HTML, CSS dan jQuery: Cipta karusel dengan kesan pudar" >, setiap elemen mewakili imej untuk diputar. Untuk mencapai kesan fade-in dan fade-out, kita boleh menetapkan semua imej kepada kedudukan mutlak dan menggunakan CSS untuk menyembunyikan imej lain dan hanya memaparkan imej semasa. 标签中添加一个<div>容器，并为它设置一个唯一的ID，比如<code><div id="slideshow">。在这个容器中，我们可以添加多个<code><img alt="HTML, CSS dan jQuery: Cipta karusel dengan kesan pudar" >元素，每个元素代表一张要轮播的图片。为了实现淡入淡出效果，我们可以将所有图片都设置为绝对定位，并使用CSS隐藏其他图片，只显示当前图片。

以下是HTML代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>带有淡入淡出效果的轮播图</title>
    <style>
        #slideshow {
            position: relative;
            width: 800px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }

        #slideshow img {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        #slideshow img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="slideshow">
        <img  src="image1.jpg" class="active" alt="HTML, CSS dan jQuery: Cipta karusel dengan kesan pudar" >
        <img  src="image2.jpg" alt="HTML, CSS dan jQuery: Cipta karusel dengan kesan pudar" >
        <img  src="image3.jpg" alt="HTML, CSS dan jQuery: Cipta karusel dengan kesan pudar" >
    </div>

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

Salin selepas log masuk

接下来，我们需要使用CSS来设置轮播图的样式。在样式中，我们首先为轮播图容器#slideshow设置了一个相对定位，并指定了容器的宽度、高度和边距。然后，我们为轮播图中的图片设置了绝对定位，并将它们的位置设置为顶部和左侧都为0，使它们重叠在一起。我们还将图片的初始透明度设置为0，并通过CSS过渡效果实现了透明度从0到1的过渡动画。

在默认情况下，轮播图的第一张图片应该是可见的，而其他图片应该是隐藏的。为了实现这个效果，我们使用了一个名为active的CSS类，并将其添加到第一张图片上。在CSS中，我们设置了active类的透明度为1，而其他图片的透明度仍然是0。

现在，我们需要使用jQuery来实现图片的切换效果。在<body>标签的底部，我们通过添加以下代码来引入jQuery库和自定义的JavaScript脚本。

<script src="jquery.min.js"></script>
<script src="script.js"></script>

Salin selepas log masuk

在script.js文件中，我们需要编写JavaScript代码来实现轮播图的切换功能。以下是代码示例：

$(document).ready(function(){
    setInterval(function() {
        $('#slideshow img.active').fadeTo(1000, 0, function() {
            $(this).removeClass('active');

            if ($(this).next('img').length) {
                $(this).next('img').fadeTo(1000, 1).addClass('active');
            } else {
                $('#slideshow img:first').fadeTo(1000, 1).addClass('active');
            }
        });
    }, 3000);
});

Salin selepas log masuk

在以上代码中，我们使用了setInterval函数来设置轮播图的自动切换时间间隔。函数中的3000表示每隔3秒自动切换一次图片。

在函数内部，我们首先找到当前显示的图片，并使用fadeTo函数将其透明度从1渐变为0。在动画完成后，我们将active类从这张图片上移除。然后，我们检查下一张图片是否存在。如果存在，我们将其透明度从0渐变为1，并将active类添加到这张图片上。如果不存在，则将active

Berikut ialah contoh kod HTML:

rrreee

Seterusnya, kita perlu menggunakan CSS untuk menggayakan karusel. Dalam gaya, kami mula-mula menetapkan kedudukan relatif untuk bekas karusel #slideshow dan nyatakan lebar, tinggi dan jidar bekas itu. Kami kemudian menetapkan kedudukan mutlak untuk imej dalam karusel dan menetapkan kedudukannya kepada 0 untuk kedua-dua bahagian atas dan kiri supaya ia bertindih. Kami juga menetapkan ketelusan awal imej kepada 0 dan melaksanakan animasi peralihan ketelusan daripada 0 kepada 1 melalui kesan peralihan CSS. 🎜🎜Secara lalai, imej pertama karusel harus kelihatan, manakala imej lain harus disembunyikan. Untuk mencapai kesan ini, kami menggunakan kelas CSS yang dipanggil active dan menambahkannya pada imej pertama. Dalam CSS, kami menetapkan ketelusan kelas aktif kepada 1, manakala ketelusan imej lain masih 0. 🎜🎜Kini, kita perlu menggunakan jQuery untuk mencapai kesan penukaran imej. Di bahagian bawah teg , kami memperkenalkan perpustakaan jQuery dan skrip JavaScript tersuai dengan menambahkan kod berikut. 🎜rrreee🎜Dalam fail script.js, kita perlu menulis kod JavaScript untuk melaksanakan fungsi penukaran karusel. Berikut ialah contoh kod: 🎜rrreee🎜Dalam kod di atas, kami menggunakan fungsi setInterval untuk menetapkan selang masa penukaran automatik karusel. 3000 dalam fungsi bermaksud menukar gambar secara automatik setiap 3 saat. 🎜🎜Di dalam fungsi, kita mula-mula mencari imej yang sedang dipaparkan dan menggunakan fungsi fadeTo untuk memudarkan ketelusannya daripada 1 hingga 0. Selepas animasi selesai, kami mengalih keluar kelas aktif daripada imej. Kemudian kami menyemak sama ada imej seterusnya wujud. Jika ia wujud, kami meningkatkan ketelusannya daripada 0 kepada 1 dan menambah kelas aktif pada imej. Jika ia tidak wujud, tambahkan kelas aktif pada imej pertama dalam karusel untuk menjadikannya dipaparkan semula. 🎜🎜Dengan kod HTML, CSS dan JavaScript di atas, kami berjaya mencipta karusel dengan kesan fade-in dan fade-out. Dengan melaraskan gaya CSS dan kod JavaScript, lebih banyak gaya dan kesan animasi boleh dicapai untuk memenuhi keperluan yang berbeza. Imej karusel ini boleh digunakan untuk memaparkan produk, maklumat promosi atau karya cemerlang di halaman web untuk meningkatkan pengalaman dan aktiviti visual pengguna. 🎜