图片切换（数组方法实现）

最新推荐文章于 2022-04-08 20:16:21 发布

Jyann~

最新推荐文章于 2022-04-08 20:16:21 发布

阅读量838

点赞数

分类专栏：前端 JS高级文章标签：图片切换数组方法push()/pop()/unshift()/shi

本文链接：https://blog.csdn.net/qq_34569497/article/details/96905483

版权

前端同时被 2 个专栏收录

173 篇文章 14 订阅

订阅专栏

JS高级

84 篇文章 3 订阅

订阅专栏

图片切换：点击按钮，切换图片，三张图片同时动

使用push(),pop(),unshift(),shift()方法

<!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 {
            height: 100vh;
            background-color: rgb(247, 202, 208);
        }

        .wrap {
            width: 860px;
            height: 400px;
            margin: 50px auto;
            position: relative;

        }


        img {
            position: absolute;
            z-index: 2;
            transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        #prev {
            width: 20px;
            height: 30px;
            position: absolute;
            left: 100px;
            top: 32%;
            background: url(./img/prev.png) no-repeat;
            z-index: 9999;
        }

        #next {
            width: 20px;
            height: 30px;
            position: absolute;
            left: 460px;
            top: 32%;
            background: url(./img/next.png) no-repeat;
            z-index: 9999;
        }

        .one{
            left: 0px;
            transform: scale(.8);
            z-index: 0;
        }
        .three{
            left: 300px;
            transform: scale(.8);
            z-index: 0;
        }
        .two{
            left:150px;
            transform: scale(1.2);
            z-index:10;
        }

    </style>
</head>

<body>
    <div class="wrap">
        <img src="./img/f1.png" alt="" class="one">
        <img src="./img/f2.png" alt="" class="two">
        <img src="./img/f3.png" alt="" class="three">
        <div class="btns">
            <a href="javascript:;" id="prev">
            </a>
            <a href="javascript:;" id="next">
            </a>
        </div>

    </div>
<script>
(function(){
    var wrap = document.querySelector(".wrap");
    var imgs = wrap.querySelectorAll("img");
    var prev = wrap.querySelector("#prev");
    var next = wrap.querySelector("#next");

    var classList = [];
    for (var i = 0; i < imgs.length; i++) {
        classList.push(imgs[i].classList.value);
    }
    // console.log(classList);
    // console.log(imgs[0].classList,imgs[1].classList,imgs[2].classList);
    //前一张：将第一张图片删除，放到最后一张
    prev.onclick = function(){
        classList.push(classList.shift());
        for (var i = 0; i < imgs.length; i++) {
            //设置前需将已存在的classList先删除
            imgs[i].classList.remove(imgs[i].classList.value);
            imgs[i].classList.add(classList[i]);
        }
    };
    //后一张：将最后一张删除，放到第一张的位置
    next.onclick = function(){
        classList.unshift(classList.pop());
        for (var i = 0; i < imgs.length; i++) {
            //设置前需将已存在的classList先删除
            imgs[i].classList.remove(imgs[i].classList.value);
            imgs[i].classList.add(classList[i]);
        }
    };
})();   
</script>
</body>

</html>