js、css实现三个图片循环播放的效果(图片带有阴影效果)

csqccccc

已于 2022-01-24 19:31:45 修改

阅读量1.5k

点赞数

分类专栏：笔记文章标签： css javascript css3

于 2022-01-20 14:49:13 首次发布

本文链接：https://blog.csdn.net/qq_46225867/article/details/122601590

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>
    <style>
        div {
            width: 400px;
            height: 204px;
            position: fixed;
        }

        .move0 {
            left: 100px;
            animation-name: picture_alter1;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }

        .move1 {
            left: 400px;
            animation-name: picture_alter2;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }

        .move2 {
            left: 700px;
            animation-name: picture_alter3;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }

        img {
            width: 100%;
            height: 100%;
            border-radius: 4%;
            /* 
            box-shadow: h-shadow v-shadow blur spread color inset;
            各属性值的解析：
            horizontal（水平）：指定水平偏移阴影。正值（即：5px）阴影向右，而为负值（即：- 10px）将使它偏向左。

            vertical（垂直）：指定垂直偏移阴影。正值（即：5px）会使阴影在框的底部，而负值（即：- 10px）将使它偏向上。

            blur(模糊)：设置的柔化半径。默认值为0，这意味着没有模糊。正值增加了模糊，而负值，实际上缩小了阴影。此属性默认为0。

            spread:阴影的尺寸，该参数为可选参数。0px代表阴影和当前的实体一样大，大于0则表示大于实体的尺寸。

            color(颜色)：颜色值,也就是设置阴影颜色。

            inset:将外部阴影 (outset) 改为内部阴影。该参数为可选参数。*/
            box-shadow: 10px 10px 30px 5px #b3b2b2;
        }

        @keyframes picture_alter1 {
            from {
                width: 400px;
                height: 204px;
                top: 0px;
                left: 100px;
                z-index: 0;
            }

            to {
                width: 410px;
                height: 209px;
                z-index: 20;
                left: 400px;
                top: 40px;
            }
        }

        @keyframes picture_alter2 {
            from {
                width: 410px;
                height: 209px;
                top: 40px;
                left: 400px;
                z-index: 20;
            }

            to {
                width: 400px;
                height: 204px;
                z-index: 0;
                left: 700px;
                top: 0px;
            }
        }

        @keyframes picture_alter3 {
            from {
                left: 700px;
            }

            to {
                left: 100px;
                top: 0px;
            }
        }
    </style>
    <style>
        /* 三个图片的初始位置:防止刚打开网页时三个图片是重合在一起的状态 */
        #img1.initial{
            width: 400px;
            height: 204px;
            top: 0px;
            left: 100px;
            z-index: 0;
        }
        #img2.initial{
            width: 410px;
            height: 209px;
            top: 40px;
            left: 400px;
            z-index: 20;
        }
        #img3.initial{
            left: 700px;
        }
    </style>
    <script>
        var img1;
        var img2;
        var img3;
        var flag;
        window.onload=function(){
            img1 = document.getElementById("img1");
            img2 = document.getElementById("img2");
            img3 = document.getElementById("img3");
            flag = 0;   
            setInterval(select_model, 2000);
        }
        
        function select_model() {
            changeClass(flag);
            flag = (flag + 1) % 3;
        }
        function changeClass(i) {
            img1.setAttribute("class", "move" + (i));
            img2.setAttribute("class", "move" + (i + 1) % 3);
            img3.setAttribute("class", "move" + (i + 2) % 3);
        }
    </script>
</head>

<body>
    <div id="img1" class="initial"><img src="./img/test.jfif" alt="img"></div>
    <div id="img2" class="initial"><img src="./img/test.jfif" alt="img"></div>
    <div id="img3" class="initial"><img src="./img/test.jfif" alt="img"></div>
</body>

</html>

csqccccc

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js、css实现三个图片循环播放的效果(图片带有阴影效果)

<!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>Do
复制链接

扫一扫