移动端旋转地球轮播图

程序员文章站 2024-01-22 21:31:52
...
移动端旋转地球轮播图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <title>淘宝全球购-swiper中文网demo</title>
    <link rel="stylesheet" href="https://sucai.suoluomei.cn/sucai_zs/file/20191212170429-swiper.min.css">
    <script src="https://sucai.suoluomei.cn/sucai_zs/file/20191212170422-swiper.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body{
      background: linear-gradient(to right, rgb(147, 59, 255), rgb(253, 110, 244));
    }

    li {
        list-style-type: none;
    }

    img {
        max-width: 100%;
        display: block;
    }

    .global {
        overflow: hidden;
        width: 100%;
        height: 123vw;
        position: relative;
    }

    .global-promotion {
        position: absolute;
        width: 100%;
        z-index: 4;
        top: 39%;
        left: 0;
    }

    .global-promotion .swiper-slide {
        box-sizing: border-box;
        padding-left: 3.5%;
    }

    .global-promotion .swiper-slide img {
        border-radius: 2.5vw;
        width: 100%;
    }

    .global-mask {
        position: absolute;
        bottom: -11%;
        z-index: 3;
        width: 100%;
        height: 100vw;
        background: url("http://sucai.suoluomei.cn/sucai_zs/images/20191212165533-mask.png") no-repeat left bottom /100% auto;
    }

    .global-mask img {
        margin-top: 81%;
    }

    .global-circle {
        height: 100%;
        z-index: 2;
        position: relative;
        margin-top: 15%;
    }

    .global-circle ul {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .global-circle ul li {
        position: absolute;
        left: 37%;
        width: 26%;
        height: 100%;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }

    .global-circle ul .hk {
        background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/20191212165556-hk.png");
        transform: rotate(0deg);
    }

    .global-circle ul .au {
        background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/20191212165642-au.png");
        transform: rotate(45deg);
    }

    .global-circle ul .en {
        background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/20191212165655-en.png");
        transform: rotate(90deg);
    }

    .global-circle ul .jp {
        background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/20191212165706-jp.png");
        transform: rotate(135deg);
    }

    .global-circle ul .us {
        background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/20191212165720-us.png");
        transform: rotate(180deg);
    }

    /*.global-circle ul .as{*/
    /*  background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/20191212165706-jp.png");*/
    /*  transform: rotate(225deg);*/
    /*}*/
    .global-bg {
        position: absolute;
        z-index: 1;
        top: 0;
        width: 100%;
        height: 100%;
        background: url("http://sucai.suoluomei.cn/sucai_zs/images/20191212165628-bg.png") no-repeat left bottom/100% auto;
    }

    #bottom {
        position: fixed;
        z-index: 10;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #f2f2f2;
    }
</style>
<body>
<div class="global">
    <div class="swiper-container global-promotion">
        <div class="swiper-wrapper">
            <div class="swiper-slide hk"><img src="https://sucai.suoluomei.cn/sucai_zs/images/20191212170722-p_hk.png">
            </div>
            <div class="swiper-slide au"><img src="https://sucai.suoluomei.cn/sucai_zs/images/20191212170741-p_au.png">
            </div>
            <div class="swiper-slide en"><img src="https://sucai.suoluomei.cn/sucai_zs/images/20191212170752-p_en.png">
            </div>
            <div class="swiper-slide jp"><img src="https://sucai.suoluomei.cn/sucai_zs/images/20191212170803-p_jp.png">
            </div>
            <div class="swiper-slide us"><img src="https://sucai.suoluomei.cn/sucai_zs/images/20191212170813-p_us.png">
            </div>
            <!--          <div class="swiper-slide as"><img src="https://sucai.suoluomei.cn/sucai_zs/images/20191212170813-p_us.png">-->
            <!--          </div>-->
        </div>
    </div>
    <div class="global-circle">
        <ul>
            <li class="hk"></li>
            <li class="au"></li>
            <li class="en"></li>
            <li class="jp"></li>
            <li class="us"></li>
            <!--          <li class="as"></li>-->
        </ul>
    </div>
</div>
<script>
    eval(function (p, a, c, k, e, r) {
        e = function (c) {
            return c.toString(a)
        };
        if (!''.replace(/^/, String)) {
            while (c--) r[e(c)] = k[c] || e(c);
            k = [function (e) {
                return r[e]
            }];
            e = function () {
                return '\\w+'
            };
            c = 1
        }
        ;
        while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
        return p
    }('k h=g j(".3-l",{m:1.n,o:.p*q.r.s,u:!0,f:{i:7(){2=6*4.5;4.$8.9(".3").b(".3-c").d("e(-"+2+"2)")},t:7(a){2=6*4.5;4.$8.9(".3").b(".3-c").v(a).d("e(-"+2+"2) w(0, 0, 0)")}}});', 33, 33, '||deg|global|this|progress|180|function|el|parents||find|circle|transform|rotate|on|new|swiper|touchMove|Swiper|var|promotion|slidesPerView|12|slidesOffsetAfter|115|document|body|clientWidth|setTransition|watchSlidesProgress|transition|translate3d'.split('|'), 0, {}))
</script>
</body>
</html>
移动端旋转地球轮播图

移动端旋转地球轮播图

jquery实现PC端轮播图代码

JS实现点击拉拽轮播图pc端移动端适配

支持移动端原生js轮播图

支持移动端原生js轮播图

原生js实现旋转木马轮播图效果

JS实现点击拉拽轮播图pc端移动端适配

原生JS实现旋转木马轮播图特效

移动端图片上传旋转、压缩问题的方法

js实现移动端轮播图效果
