使用HTML语言完成拼多多移动端轮播图Swiper的效果设计-大连东软信息学院计算机科学与技术专业专升本高级网页设计基础四级项目课题

本文链接：https://blog.youkuaiyun.com/weixin_59042297/article/details/144324447

前言
本文所作项目已经发布到我的资源当中，可以免费下载使用。

1.本文所讲内容来自辽宁·大连东软信息学院计算机与技术专业高级网页设计（专升本）课程四级项目课题-3，题目要求是自主选择相应的APP移动端，对其进行轮播图Swiper的设计与开发；

2.本文所讲的是html超文本标记语言以及部分css样式表和Javascript语言；

3.html语言的编写以收入到我的专栏“html-本科”当中，其中有相关的系列文章；

4.本文的操作步骤具有多样性，其步骤的不是唯一、正确的答案，内容仅供参考!

5.若文中出现错误，欢迎提出指正，作者将充分吸取经验，总结问题，完善文章；

6.若涉及到有关问题可通过私信或文章底部名片方式联系本文博主，博主热情好客！

7.本文使用的软件是VScode版本，其他版本与本文步骤基本相似，若使用的版本已经汉化，请注意操作步骤；

8.本文不涉及任何官方教学及商用，请注意甄别，其内容仅供学习交流；

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果图及文档目录

文件夹标题	index.html(代码开发首页)
	img（图片页）
	swiper（轮播图实现功能）

二、轮播图Swiper的下载及使用

访问https://www.swiper.com.cn/学习轮播图的知识并下载相应的轮播图插件
本文所涉及的轮播图插件已发布到我的资源当中，有需要可以前往下载

三、代码的编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <script src="./swiper/swiper-bundle.min.js"></script>
</head>
<style>
  .swiper{
      width: 300px;
      height: 60px;
  }
  .swiper .swiper-wrapper{
      position: relative;
  }
  .swiper .swiper-wrapper img{
      width: 100%;
      height: 100%;
  }
  .swiper .swiper-wrapper p{
      margin: 0;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 16px;
      line-height: 15px;
      font-size: 10px;
      color: #ff0000;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.5);
      font-weight: bold;
      letter-spacing: 2px;
      overflow: hidden;
      text-overflow: ellipsis;/* 溢出隐藏，显示点 */
      white-space: nowrap;/* 控制文字不换行 */
  }
  .swiper-horizontal>.swiper-pagination{
      bottom: 40px;/* 点所在的区域 */
  }
  .swiper-pagination-bullet{/* 具体的点 */
      border: 3px solid #fff;
      background-color: #fff;
  }
  .swiper-button-next{
      right: 0;
  }
  .swiper-button-prev{
      left: 0;
  }
</style>

<body>
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./img/1.jpg">
            <p>官方补贴&nbsp;&nbsp;￥8799&nbsp;&nbsp;&nbsp;&nbsp;￥16699&nbsp;&nbsp;&nbsp;&nbsp;￥40.5&nbsp;&nbsp;&nbsp;&nbsp;￥3666</p>
          </div>
          <div class="swiper-slide">
            <img src="./img/2.jpg">
            <p>￥2.90&nbsp;&nbsp;&nbsp;￥40.50&nbsp;&nbsp;&nbsp;￥29.13&nbsp;&nbsp;&nbsp;￥66.15&nbsp;&nbsp;￥29.18</p>
          </div>
          <div class="swiper-slide">
            <img src="./img/3.jpg">
            <p>￥2319&nbsp;&nbsp;&nbsp;&nbsp;￥4.39&nbsp;&nbsp;&nbsp;￥4.99&nbsp;&nbsp;&nbsp;￥19.98&nbsp;&nbsp;&nbsp;&nbsp;￥19.98</p>
          </div>
          <div class="swiper-slide">
            <img src="./img/4.jpg">
            <p>￥10.99&nbsp;&nbsp;￥3.50&nbsp;&nbsp;&nbsp;&nbsp;￥8.13&nbsp;&nbsp;&nbsp;&nbsp;￥1.15&nbsp;&nbsp;&nbsp;&nbsp;￥19.18</p>
          </div>
          <div class="swiper-slide">
            <img src="./img/5.jpg">
            <p>￥5.99&nbsp;&nbsp;&nbsp;￥5.50&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥8.98&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥6.45&nbsp;&nbsp;&nbsp;&nbsp;￥15.98</p>
          </div>
          <div class="swiper-slide">
            <img src="./img/6.jpg">
            <p>￥25.99&nbsp;&nbsp;&nbsp;￥12.99&nbsp;&nbsp;&nbsp;&nbsp;￥0.93&nbsp;&nbsp;&nbsp;&nbsp;￥4.99&nbsp;&nbsp;&nbsp;&nbsp;￥5.99</p>
          </div>
        </div>
      </div>

    <script>
        var swiper = new Swiper(".mySwiper", {
          direction:'horizontal',/* 水平切换。垂直：vertical*/
          loop:true,/* 循环模式选项 */
          autoplay: {
            delay:3000/* 2000毫秒翻一页 */
          },/* 自动播放 */
          pagination: {/* 分页器 */
            el: ".swiper-pagination",
          }
        });
      </script>
</body>
</html>