jq 动态相册

最新推荐文章于 2024-07-14 18:15:00 发布

等待戈多的莱昂纳多

最新推荐文章于 2024-07-14 18:15:00 发布

阅读量371

点赞数

分类专栏：库，框架。

本文链接：https://blog.csdn.net/weixin_44892520/article/details/101852077

版权

库，框架。专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍如何利用jQuery库实现一个动态相册功能，包括图片轮播、过渡效果和导航控制。通过实例代码解析，帮助读者掌握动态相册的实现技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: black;
            overflow: hidden;
        }

        .divbg {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 0 auto;
            margin-top: 200px;
        }

        .imglist {
            position: absolute;
            height: 300px;
            box-shadow: 0px 0px 20px white;
            transition: transform 0.5s linear;
        }

        .jiantou {
            position: absolute;
            z-index: 989999;
            width: 50px;
            bottom: 0;
            left: 41%;
        }
    </style>
</head>
<body>
<div class="divbg">
    <img class="imglist" src="./img/0.jpg" alt=""/>
    <img class="imglist" src="./img/1.jpg" alt=""/>
    <img class="imglist" src="./img/2.jpg" alt=""/>
    <img class="imglist" src="./img/3.jpg" alt=""/>
    <img class="imglist" src="./img/0.jpg" alt=""/>
    <img class="imglist" src="./img/1.jpg" alt=""/>
    <img class="imglist" src="./img/2.jpg" alt=""/>
    <img class="imglist" src="./img/3.jpg" alt=""/>
    <img class="jiantou" src="./111.png" alt=""/>
</div>
<script src="jquery-3.0.0.js"></script>
<script>
    $(function () {
        var widthnum = 500;
        $(".imglist").each(function (index) {
            widthnum -= 20;
            $(this).css({
                "zIndex": -index,
                "width": widthnum + "px",
                "marginLeft": index * 10 + "px",
                "transform": "translatez(" + -index * 30 + "px) translatey(" + -index * 15 + "px)"
            });
        });
        $(".jiantou").click(function () {
            showanminate(300);
        });
        $(".imglist").each(function (index) {
            $(this).click(function () {
                if (index % 2 == 0) {
                    $(this).css({
                        "transform": $(this).css("transform") + "translatex(300px)"
                    });
                }
                else {
                    $(this).css({
                        "transform": $(this).css("transform") + "translatex(-300px)"
                    });
                }
            })
        })
        function showanminate(time) {
            $(".imglist:first").animate({"top": "500px", "opacity": "0"}, time, function () {
                $(".imglist").each(function (index) {
                    $(this).css({
                        "zIndex": parseInt($(this).css("zIndex")) + 1,
                        "width": parseInt($(this).css("width")) + 20 + "px",
                        "marginLeft": parseInt($(this).css("marginLeft")) - 10 + "px",
                        "transform": "translatez(" + (-index * 30 + 30) + "px) translatey(" + (-index * 15 + 15) + "px)"
                    });
                })
                $(this).css({
                    "top": "0",
                    "opacity": "1",
                    "zIndex": "-7",
                    "width": "340px",
                    "marginLeft": "70px",
                    "transform": "translateZ(-210px) translateY(-105px)"
                })
                $(this).appendTo($(".divbg"));
            })
        }
    });
</script>
</body>
</html>