[CSS JS] 实现图片自动切换以及淡入淡出动画

最新推荐文章于 2024-07-30 22:36:34 发布

小毛凉xml

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量644

点赞数 9

文章标签： css javascript 前端 vue

本文链接：https://blog.csdn.net/qq_57232613/article/details/137182423

版权

本文介绍了如何利用Vue.js构建一个简单的图片轮播组件，通过JavaScript定时切换图片路径，配合CSS动画实现淡入淡出效果。

摘要由CSDN通过智能技术生成

效果展示：

完整代码（全部复制，保存html，亲测可用，注意把图片路径替换成自己的）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <img :src="imagePath" alt="" class="anim_fade_image" style="height: 500px; width: 500px" />
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                images: [
                    "./images/pic1.jpg",
                    "./images/pic2.jpg",
                    "./images/pic3.jpg",
                ],//此处填上你自己的图片路径
                currentImageIndex: 0,
                imagePath: "./images/pic1.jpg",//此处填上你自己的图片路径
            };
        },
        mounted() {
            setInterval(() => {
                this.currentImageIndex =
                    (this.currentImageIndex + 1) % this.images.length;
                this.imagePath = this.images[this.currentImageIndex];
            }, 3000);
        },
    });
</script>

<style>
    @keyframes fadeInOut {
        0% {
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    .anim_fade_image {
        animation-name: fadeInOut;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-duration: 3s;
    }
</style>

</html>