js制作旋转木马轮播图效果

最新推荐文章于 2022-04-25 20:49:18 发布

岳清流云

最新推荐文章于 2022-04-25 20:49:18 发布

阅读量397

点赞数

分类专栏： javascript 前端 JavaScript

本文链接：https://blog.csdn.net/tdl081071tdy/article/details/91043245

版权

JavaScript 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

前端

13 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

效果如下

下面贴出所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        body{background-color:#b1a9ba}  
        .wrap{
            display: flex;
            width: 1100px;
            height: 300px;
            position: absolute;
            top:50%;
            margin-top:-150px;
            left: 50%;
            margin-left: -550px;
            border: solid 0px white;
        }
        .wrap div{
            width: 500px;
            height: 300px;
            transition: all 1s;
            position: absolute;
            text-align: center;
            font-size: 25px;
            color: black;
        }
        .wrap div:nth-child(1){background-color: red}
        .wrap div:nth-child(2){background-color: yellow}
        .wrap div:nth-child(3){background-color: blue}
        .wrap div:nth-child(4){background-color: greenyellow}
        .d1{
            top:50px;
            left: 300px;
            z-index: 3;

            transform: scale(1.1);
            opacity: .8;
        }

        .d2{
            z-index: 2;
            left: 600px;
            top: 1px;

            transform: scale(.9);
            opacity: .5;
        }

        .d3{
            z-index: 0;
            top:-50px;
            left: 300px;
            z-index: 0;

            transform: scale(.8);
            opacity: .5;
        }

        .d4{
            z-index: 2;
            left: 1px;
            top: 1px;

            transform: scale(.9);
            opacity: .5;
        }

        .lor{
            width: 1100px;
            height:50px;
            display: flex;
            border: solid 0px white;
            margin: 100px auto 0px auto;
            justify-content: space-between
        }
        .lor div{
            width: 50px;
            height: 50px;
            border: solid 2px white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            color: white
        }
    </style>
</head>
<body>
   <div class="wrap">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
   </div> 
   <div class="lor">
       <div class="l"> < </div>
       <div class="r"> > </div>
   </div>
   <script type="text/javascript">
        var wrapdiv = document.querySelectorAll(".wrap div");
        var r = document.querySelector(".r")
        var l = document.querySelector(".l")
        for(var i=0;i<wrapdiv.length;i++){
            wrapdiv[i].indexclass = (i+1);
        }
        console.log(wrapdiv[0].indexclass,wrapdiv[1].indexclass)
        r.addEventListener("click",function(){
            for(var i=0;i<wrapdiv.length;i++){
                if(wrapdiv[i].indexclass!=wrapdiv.length){
                    var indexclass = wrapdiv[i].indexclass;
                    wrapdiv[i].indexclass = indexclass+(wrapdiv.length-(wrapdiv.length-1));
                }else{
                    wrapdiv[i].indexclass = 1
                }
                wrapdiv[i].className = "d"+wrapdiv[i].indexclass;
                console.log(wrapdiv[i].indexclass)
            }
        })
        l.addEventListener("click",function(){
            for(var i=0;i<wrapdiv.length;i++){
                if(wrapdiv[i].indexclass!=1){
                    var indexclass = wrapdiv[i].indexclass;
                    wrapdiv[i].indexclass = indexclass-1;
                }else{
                    wrapdiv[i].indexclass = wrapdiv.length
                }
                wrapdiv[i].className = "d"+wrapdiv[i].indexclass;
                console.log(wrapdiv[i].indexclass)
            }
        })

   </script>   
</body>
</html>

岳清流云

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js制作旋转木马轮播图效果

效果如下下面贴出所有代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
复制链接

扫一扫