【仿写网站】用swiper实现故宫博物院首页轮播图

挖个洞先

已于 2022-04-01 15:19:30 修改

阅读量1.4k

点赞数 3

分类专栏：仿写网站文章标签： css3 css javascript

于 2021-12-31 20:44:47 首次发布

本文链接：https://blog.csdn.net/qq_45196785/article/details/122262177

版权

仿写网站专栏收录该内容

1 篇文章 0 订阅

订阅专栏

官网（故宫博物院 (dpm.org.cn)）效果如下：
在这里插入图片描述

仿写网页效果如下：
在这里插入图片描述
代码结构如下：

index.html代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
  <head>
    <title>故宫博物院</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="Author" content="网页作者" />
    <meta name="Copyright" content="网站版权" />
    <meta name="keywords" content="网站关键字" />
    <meta name="description" content="网站描述" />
    <link rel="Shortcut Icon" href="./images/favicon.ico" />
    <link type="text/css" rel="stylesheet" href="./css/normalize.css" />
    <link type="text/css" rel="stylesheet" href="./css/swiper-bundle.css" />
    <link type="text/css" rel="stylesheet" href="./css/index.css" />
    <script type="text/javascript" src="js/swiper-bundle.js"></script>
  </head>
  <style></style>
  <body>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <li></li>
        </div>
        <div class="swiper-slide">
          <li></li>
        </div>
        <div class="swiper-slide">
          <li></li>
        </div>
        <div class="swiper-slide">
          <li></li>
        </div>
        <div class="swiper-slide">
          <li></li>
        </div>
        <div class="swiper-slide">
          <li></li>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev">
        <img src="./images/button-prev.png" alt="" />
      </div>
      <div class="swiper-button-next">
        <img src="./images/button-next.png" alt="" />
      </div>
    </div>
    <script type="text/javascript" src="js/swiper.js"></script>
  </body>
</html>

css/index.css

.swiper {
  height: 800px;
}
/* 图片自适应 */
@keyframes imgmove {
  100% {
    transform: scale(1.2);
  }
}
.swiper-slide {
  overflow: hidden;
}

.swiper-slide li:nth-child(1) {
  width: 100%;
  height: 100%;
  display: block;
  background: url(../images/swipter1.jpg) no-repeat center;
  background-size: 100% 100%;
  animation: imgmove 5s infinite;
}

/* 分页器自定义图标 */
.my-bullet {
  display: inline-block;
  width: 27px;
  height: 24px;
  margin: 0 5px;
  line-height: 3px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background: url(../images/pagination.png) no-repeat left center;
}
.my-bullet-active {
  display: inline-block;
  width: 27px;
  height: 24px;
  margin: 0 5px;
  line-height: 3px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background: url(../images/pagination.png) no-repeat right center;
}

/* 清除前进后退按钮after */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: none;
}
.swiper-button-prev,
.swiper-button-next {
  margin-left: 20px;
  margin-right: 20px;
}

/* 一般情况隐藏鼠标悬浮显示 */
.swiper-button-prev,
.swiper-button-next {
  opacity: 0;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 1;
}

js/swiper.js

// 创建Swiper
var mySwiper = new Swiper(".swiper", {
  direction: "horizontal", // 左右切换
  loop: true, // 循环模式选项
  autoplay: true, // 自动切换
  grabCursor: true, // 鼠标指针

  // 如果需要分页器
  pagination: {
    el: ".swiper-pagination",
    clickable: true, // 点击控制切换
    bulletClass: "my-bullet", // 自定义样式
    bulletActiveClass: "my-bullet-active", // 自定义当前图片分页器样式
  },

  // 如果需要前进后退按钮
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

// 鼠标点击pagination控制swiper切换
for (i = 0; i < mySwiper.pagination.bullets.length; i++) {
  mySwiper.pagination.bullets[i].onclick = function () {
    this.click();
  };
}

// 如果你在swiper初始化后才决定使用clickable，可以这样设置
mySwiper.params.pagination.clickable = true;
// 此外还需要重新初始化pagination
mySwiper.pagination.destroy();
mySwiper.pagination.init();
mySwiper.pagination.bullets
  .eq(0)
  .addClass("swiper-pagination-bullet-active my-bullet-active");