CSs两张图片轮换

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSs两张图片轮换是指在一个网页中,两张图片交替显示,让网页效果更加生动。下面是一段实现这个效果的代码,代码使用pre标签: <div class= slider > &a

CSs两张图片轮换是指在一个网页中,两张图片交替显示,让网页效果更加生动。下面是一段实现这个效果的代码,代码使用pre标签:

 <div class="slider">
        <img class="slide" src="image1.jpg" alt="image1">
        <img class="slide" src="image2.jpg" alt="image2">
    </div>

    <style>
        .slider {
            width: 500px;
            height: 300px;
            overflow: hidden;
        }
        .slide {
            width: 500px;
            height: 300px;
            display: none;
        }
        .active {
            display: block;
        }
    </style>

    <script>
        $(document).ready(function() {
            setInterval(function() {
                var currentSlide = $('.active');
                var nextSlide = currentSlide.next();
                if (nextSlide.length === 0) {
                    nextSlide = $('.slide').first();
                }
                currentSlide.removeClass('active');
                nextSlide.addClass('active');
            }, 5000);
        });
    </script> 

在上面的代码中,我们创建了一个div来包含两张图片,并设置其为隐藏。然后,我们为.active类设置了display: block,这样可以让其中的一张图片显示。在JavaScript部分,我们使用setInterval函数在5秒钟后切换到下一张图片,并为其添加或删除.active类来控制其显示。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: CSs两张图片轮换

粉丝

0

关注

0

收藏

0

已有0次打赏