菜单 学习猿地 - LMONKEY

 怎么用js和css写一个幻灯片

怎么用js和css写一个幻灯片

jimmyliu profile image jimmyliu ・1 min read

怎么用js和css写一个幻灯片

思路如下:

1、创建一个div,用来包裹所有的图片,并设置定位方式为relative;

2、所有的图片设置定位方式为absolute;距离顶部为0;

3、并使用css属性transition给图片加上过渡动画,初始时不透明度为0;

4、使用js的setInterval函数创建定时器,在定时器内先将所有的图片隐藏,再利用下标将需要的图片显示。

(相关课程推荐:JS视频教程

具体代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 460px;
            height: 240px;
            overflow: hidden;
            position: relative;
        }
        .wrap img{
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            transition: all .5s;
        }
        .wrap .show{
            opacity: 1;
        }

    </style>
</head>
<body>
    <div>
        <img src="css3.jpg" alt="">
        <img src="css-4.jpg" alt="">
        <img src="css-5.jpg" alt="">
        <img src="html.jpg" alt="">
        <img src="html1.jpg" alt="">
    </div>

    <script>
        const imgs = document.querySelectorAll('.wrap img');
        let index = 0;
        function changeImg() {
            console.log(index)
            for (let img of imgs) {
                img.className = ''
            }
            imgs[index].className = 'show';
            index = index >= imgs.length - 1 ? 0 : ++index;
        }

        changeImg();
        setInterval(changeImg, 1000)
        
    </script>
</body>
</html>

效果图:

4.gif

评论 (0)