Register
> 博客>

html幻灯片效果代码

新星源码网 1年前 7 0

以下是一个简单的HTML幻灯片效果代码：

<!DOCTYPE html>
<html>
<head>
    <title>HTML幻灯片效果</title>
    <style>
        .slide {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
            text-align: center;
            padding-top: 20%;
            font-size: 3em;
            color: #333;
        }
        .slide.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="slide active">第一张幻灯片</div>
    <div class="slide">第二张幻灯片</div>
    <div class="slide">第三张幻灯片</div>
    <div class="slide">第四张幻灯片</div>

    <script>
        var slides = document.querySelectorAll('.slide');
        var currentSlide = 0;
        var slideInterval = setInterval(nextSlide, 2000);

        function nextSlide() {
            slides[currentSlide].className = 'slide';
            currentSlide = (currentSlide + 1) % slides.length;
            slides[currentSlide].className = 'slide active';
        }
    </script>
</body>
</html>

这个代码创建了一个包含四张幻灯片的HTML页面。每张幻灯片都是一个<div>元素，它们的样式被定义在CSS中。幻灯片的切换是通过JavaScript实现的，使用了一个定时器来每隔两秒钟切换到下一张幻灯片。

这个代码中的JavaScript部分使用了querySelectorAll()方法来获取所有的幻灯片元素，然后使用一个变量currentSlide来跟踪当前显示的幻灯片。setInterval()方法用于定时调用nextSlide()函数，该函数会将当前幻灯片的className设置为slide，然后将currentSlide变量增加1，再将下一张幻灯片的className设置为slide active，从而实现幻灯片的切换。

需要注意的是，这个代码中的幻灯片效果非常简单，只是通过显示和隐藏幻灯片元素来实现的。如果需要更复杂的幻灯片效果，可能需要使用一些JavaScript库或框架，例如jQuery、Bootstrap等。

Related

热门文章

微海报