<!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=".min.css"><script src=".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(".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(".png");transform: rotate(0deg);}.global-circle ul .au {background-image: url(".png");transform: rotate(45deg);}.global-circle ul .en {background-image: url(".png");transform: rotate(90deg);}.global-circle ul .jp {background-image: url(".png");transform: rotate(135deg);}.global-circle ul .us {background-image: url(".png");transform: rotate(180deg);}/*.global-circle ul .as{*//* background-image: url(".png");*//* transform: rotate(225deg);*//*}*/.global-bg {position: absolute;z-index: 1;top: 0;width: 100%;height: 100%;background: url(".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=".png"></div><div class="swiper-slide au"><img src=".png"></div><div class="swiper-slide en"><img src=".png"></div><div class="swiper-slide jp"><img src=".png"></div><div class="swiper-slide us"><img src=".png"></div><!-- <div class="swiper-slide as"><img src=".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) {String(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:.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>
本文发布于:2024-01-28 16:06:58，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17064292238611.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
