大图轮播效果

最新推荐文章于 2021-07-20 23:27:17 发布

vicsdmpy

最新推荐文章于 2021-07-20 23:27:17 发布

阅读量222

点赞数

分类专栏： css+js动画

本文链接：https://blog.csdn.net/vicsdmpy/article/details/109253149

版权

css+js动画专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果如图，原理比较简单直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .box img{
            width: 400px;
            height: 400px;
            position: absolute;
            transition: all 0.3s;
        }
        .left{
            transform: translate(-450px);
            filter: blur(25px);
        }
        .right{
            transform: translate(450px);
            filter: blur(25px);
        }
        .middle{
            transform: scale(1.1);
            transform-origin: center bottom;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./1.jpg" class="left" alt="">
        <img src="./2.jpg" class="middle" alt="">
        <img src="./3.jpg" class="right" alt="">
    </div>
</body>
<script>
        let imgs = document.getElementsByTagName('img')
        console.log(imgs)
        for(let i = 0;i < imgs.length; i++){
            imgs[i].addEventListener('click',function () {
                this.classList.remove('left','middle','right')
                this.classList.add('middle')
                if(i!==0){
                    imgs[i-1].classList.remove('left','middle','right')
                    imgs[i-1].classList.add('left')
                }else{
                    imgs[imgs.length-1].classList.remove('left','middle','right')
                    imgs[imgs.length-1].classList.add('left')
                }
                if(i!==imgs.length-1){
                    imgs[i+1].classList.remove('left','middle','right')
                    imgs[i+1].classList.add('right')
                }else{
                    imgs[0].classList.remove('left','middle','right')
                    imgs[0].classList.add('right')
                }
            })
        }
</script>
</html>