移动端旋转地球轮播图

最新推荐文章于 2022-10-29 11:00:17 发布

hy3528

最新推荐文章于 2022-10-29 11:00:17 发布

阅读量267

点赞数

分类专栏： H5 JQuery

本文链接：https://blog.csdn.net/hy3528/article/details/103512678

版权

H5 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

JQuery

16 篇文章 0 订阅

订阅专栏

<!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>轮播图</title>
  <link rel="stylesheet" href="https://sucai.suoluomei.cn/sucai_zs/file/20191212170429-swiper.min.css">
  <link rel="stylesheet" href="https://sucai.suoluomei.cn/sucai_zs/file/20191212170333-20191212165135-style.css">
</head>
<body>
<!--<ul id="top"><li>首页</li><li>全球动态</li><li>海外直播</li></ul>-->
<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>
  </div>
<!--<div class="global-mask"><img src="images/txt.png"></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>
</ul>
</div>
<!--<div class="global-bg"></div>-->
</div>
<!--<div><img src="images/other.png" width="100%"></div>-->
<!--<div id="bottom"><img src="images/bottom.png" width="100%"></div>-->
  <script src="https://sucai.suoluomei.cn/sucai_zs/file/20191212170422-swiper.min.js"></script>
  <script src="https://sucai.suoluomei.cn/sucai_zs/file/20191212170527-taobao.min.js"></script>
</body>
</html>

效果图
在这里插入图片描述

hy3528

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
移动端旋转地球轮播图

<!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"> ...
复制链接

扫一扫

专栏目录