支付宝页面的无缝加计时器轮播图

最新推荐文章于 2022-10-15 11:55:11 发布

Meroy0

最新推荐文章于 2022-10-15 11:55:11 发布

阅读量448

点赞数

本文链接：https://blog.csdn.net/Meroy0/article/details/100566933

版权

全部代码

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="baidu-site-verification" content="OyUb4RVdSe">
    <meta name="renderer" content="webkit">
    <title>计时器</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style>
        .items,
        .item {
            position: absolute;
            left: 0;
            top: 0;
            width: 500px;
            height: 500px;
            overflow: hidden;
        }

        .items {
            overflow: visible;
        }

        .item {
            background: #fff none no-repeat center center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            display: none;
        }
    </style>

    <style>
        .item1 {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg", sizingMethod="scale");
        }

        .item2 {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg", sizingMethod="scale");
        }

        .item3 {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg", sizingMethod="scale");
        }
    </style>


</head>

<body>
    <div class="items">
        <div class="item item3"
            style="background-image: url(&quot;https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg&quot;);">
        </div>
        <div class="item item1"
            style="background-image: url(&quot;https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg&quot;); display: block;">
        </div>
        <div class="item item2"
            style="background-image: url(&quot;https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg&quot;); display: block;">
        </div>
    </div>
    <script src="https://t.alipayobjects.com/images/rmsweb/T19ctgXcRlXXXXXXXX.js"></script>
    <script>

        var slideEle = slider($('.items'));

        function slider(elem) {
            var items = elem.children(),
                max = items.length - 1,
                animating = false,
                currentElem,
                nextElem,
                pos = 0;

            sync();

            return {
                next: function () {
                    move(1);
                },
                prev: function () {
                    move(-1);
                },
                itemsNum: items && items.length
            };

            function move(dir) {
                if (animating) {
                    return;
                }
                if (dir > 0 && pos == max || dir < 0 && pos == 0) {
                    if (dir > 0) {
                        nextElem = elem.children('div').first().remove();
                        nextElem.hide();
                        elem.append(nextElem);
                    } else {
                        nextElem = elem.children('div').last().remove();
                        nextElem.hide();
                        elem.prepend(nextElem);
                    }
                    pos -= dir;
                    sync();
                }
                animating = true;
                items = elem.children();
                currentElem = items[pos + dir];
                $(currentElem).fadeIn(400, function () {
                    pos += dir;
                    animating = false;
                });
            }

            function sync() {
                items = elem.children();
                for (var i = 0; i < items.length; ++i) {
                    items[i].style.display = i == pos ? 'block' : '';
                }
            }

        }

        if (slideEle.itemsNum && slideEle.itemsNum > 1) {
            setInterval(function () {
                slideEle.next();
            }, 3000)
        }


    </script>
    <script>
        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toUTCString();
            document.cookie = cname + "=" + cvalue + "; " + expires;
        }


        $(".personal-login").click(function () {
            setCookie("_n_h_n_option", "1", 365);
            location.href = "https://www.alipay.com";
        });

        $(".seller-login").click(function (e) {
            var target = $(e.target);
            if (target.hasClass('alipay')) {
                location.href = "https://b.alipay.com/?ynsrc=zhuzhanA";
            } else if (target.hasClass('koubei')) {
                location.href = "https://e.alipay.com/index.htm?from=zhuzhan20160927";
            }
        });
        $(".developer-login").click(function () {
            location.href = "https://open.alipay.com/platform/home.htm?from=zhuzhan20160818";
        });
    </script>
</body>

</html>

Meroy0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
支付宝页面的无缝加计时器轮播图

全部代码<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="baidu-site-verification" content="OyUb4RVd...
复制链接

扫一扫