php中轮播图（html简单轮播图代码）

作者：当过家家——变成现实。发布日期:2025-01-25 浏览:293

以下是一个简单的HTML轮播图代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>轮播图</title>
    <style>
        .slideshow {
            position: relative;
            width: 500px;
            height: 300px;
            overflow: hidden;
        }

        .slideshow img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .slideshow img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="slideshow">
        <img src="image1.jpg" class="active">
        <img src="image2.jpg">
        <img src="image3.jpg">
    </div>

    <script>
        var images = document.querySelectorAll('.slideshow img');
        var currentImage = 0;

        function changeImage() {
            images[currentImage].classList.remove('active');
            currentImage = (currentImage + 1) % images.length;
            images[currentImage].classList.add('active');
        }

        setInterval(changeImage, 2000);
    </script>
</body>
</html>

这段代码创建了一个500x300像素的轮播图容器，其中包含三个图片（image1.jpg，image2.jpg和image3.jpg）。通过使用CSS将图片的透明度设置为0，并且使用过渡效果，可以实现图片的淡入淡出效果。

在JavaScript部分，通过使用setInterval函数每2秒调用changeImage函数来轮播图片。changeImage函数会将当前显示的图片的active类移除，并将下一张图片的active类添加上去。这样就可以实现图片的切换效果。

上一篇：音乐播放器php代码（音乐播放器js代码）

下一篇：php 当月的第一天（php上个月最后一天）