旋转轮播图

最新推荐文章于 2024-03-15 14:40:52 发布

weixin_45428021

最新推荐文章于 2024-03-15 14:40:52 发布

阅读量94

点赞数

分类专栏： html 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_45428021/article/details/126607647

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en" onmousedown="return false">

<head>
    <meta charset="utf-8" />
    <title>doc</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .pic {
            margin: 100px auto 0px;
            /*border:1px solid #ff0000;*/
            width: 280px;
            height: 400px;
            position: relative;
            transform-style: preserve-3d;
            transform: perspective(800px) rotateX(-16deg) rotateY(0deg);

        }

        body {
            background-color: #000000;
        }

        div.pic img {
            cursor: pointer;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 20px;


        }

        p {
            width: 1200px;
            height: 1200px;

            position: absolute;
            left: 50%;
            top: 100%;
            margin-top: -600px;
            margin-left: -600px;
            transform: rotateX(90deg);
            border-radius: 600px;
        }
    </style>
    <!--<script language="javascript">
        function imgdragstart() { return false;}
    </script>-->

</head>

<body style="width:100%;height:100%">
    <div class="pic">
        <img src="" draggable="false" />
        <img src="" draggable="false" />
        <img src="" draggable="false" />
        <img src="" draggable="false" />
        <img src="" draggable="false" />
        <img src="" draggable="false" />

        <p></p>
    </div>
    <script src="https://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(function () {
            var imgl = $("div.pic img").size();
            var deg = 360 / imgl;
            var roY = 0;
            var rox = -10;
            var xn = 0, yn = 0;
            var play = null;

            $("div.pic img").each(function (i) {
                $(this).css({
                    "transform": "rotateY(" + i * deg + "deg) translateZ(280px)"
                });
                $(this).attr('ondragstart', 'return false');
            });
            $(document).mousedown(function (ev) {

                var x_ = ev.clientX;
                var y_ = ev.clientY;
                clearInterval(play);
                $(this).bind("mousemove", function (ev) {

                    var x = ev.clientX;
                    var y = ev.clientY;

                    xn = x - x_;
                    yn = y - y_;
                    varyn = y - y_;
                    roY += xn * 0.2;
                    rox -= yn * 0.1;

                    $('div.pic').css({
                        transform: 'perspective(800px) rotateX(-16deg) rotateY(' + roY + 'deg)'
                    })

                    x_ = ev.clientX;
                    y_ = ev.clientY;
                });
            }).mouseup(function () {
                $(this).unbind("mousemove");
                var play = setInterval(function () {
                    xn *= 0.95;
                    yn *= 0.95;
                    if (Math.abs(xn) < 1 && Math.abs(yn) < 1) clearInterval(play);

                    roY += xn * 0.2;
                    rox -= yn * 0.1;
                    $('div.pic').css({
                        transform: 'perspective(800px) rotateX(-16deg) rotateY(' + roY + 'deg)'
                    })
                }, 30)
            });
        });
    </script>
</body>

</html>