两种轮播图实现方式

2023-07-08 03:49 作者：Admin

最近做了一个网站，首页轮播图一直没有达到理想的效果，在网上找了两个实现方法，一个是用css自己实现，一个是用swiper插件，个人认为swiper做的还比较好用。这里只贴出主要的实现代码，想要看具体实现代码及效果可以到对应网址上看：

一、css实现轮播图

原文网址：https://www.jianshu.com/p/550c11f3b731

实现逻辑：

1）将所有的轮播图片放在一个容器里面，并排排列；

2）编写css动画事件：每隔一定时间向左偏移一定距离，距离为一个轮播图宽度；到最后一个轮播图后切换到第一个图片，实现无限循环

优点：

实现逻辑简单，可以直接拿来用

缺点：

轮播图数量固定，如果要增删，需要修改代码；不是一个顺序的无限循环，到达最后一个轮播图后，会有一个快速倒退的动画，效果不是太好

主要实现代码：

/*//自动播放*/
.slide .slide-auto {
	animation: marginLeft 10.5s infinite;
}

@keyframes marginLeft {
	0% {
		margin-left: 0;
	}

	28.5% {
		margin-left: 0;
	}

	33.3% {
		margin-left: -600px;
	}

	62% {
		margin-left: -600px;
	}

	66.7% {
		margin-left: -1200px;
	}

	95.2% {
		margin-left: -1200px;
	}

	100% {
		margin-left: 0;
	}
}

二、swiper插件实现方式

文档网址：https://www.swiper.com.cn/usage/index.html

实现方法：

1）下载插件文件：swiper-bundle.min.js和swiper-bundle.min.css，下载地址：https://www.swiper.com.cn/download/index.html#file1，下载文件后解压，在swiper-masterpackage目录下有这两个文件；

2）引入插件文件：

<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css" />
  </head>
  <body>
    ...
    <script src="dist/js/swiper-bundle.min.js"></script>
    ...
  </body>
</html>

3）编写轮播html页面：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>

  <!-- 如果需要导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- 如果需要滚动条 -->
  <div class="swiper-scrollbar"></div>
</div>

4）JS编写代码启动轮播图效果

var mySwiper = new Swiper(".swiper-container", {
  direction: "vertical", // 垂直切换选项
  loop: true, // 循环模式选项

  // 如果需要分页器
  pagination: {
    el: ".swiper-pagination"
  },

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

  // 如果需要滚动条
  scrollbar: {
    el: ".swiper-scrollbar"
  }
});

优点：

对轮播图数量没有限制，增删轮播图不需要修改代码；

功能可配置，自由增删轮播功能，api文档地址：https://www.swiper.com.cn/api/index.html

可以外部控制轮播图，详细可见api文档中的Methods（Swiper方法）

提供import引入方式，可应用在vue和react中。

缺点：

有学习成本，不过不高

文章来源：https://www.cnblogs.com/flysheet/p/swiper.html

标签： #轮播图 #CSS