两种轮播图实现方式

2023-12-19 14:51:46

一、css实现轮播图

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

实现逻辑：

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

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

优点：

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

缺点：

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

主要实现代码：

<!-- 点击轮播 -->
<div class="slide" style="margin-top: 80px;">

  <input type="radio" name="sildeInput" value="0" id="sildeInput1" checked hidden />
  <label for="sildeInput1">1</label>

  <input type="radio" name="sildeInput" value="1" id="sildeInput2" hidden />
  <label for="sildeInput2">2</label>

  <input type="radio" name="sildeInput" value="1" id="sildeInput3" hidden />
  <label for="sildeInput3">3</label>

  <ul>
    <li>one-点击切换</li>
    <li>two-点击切换</li>
    <li>three-点击切换</li>
  </ul>
</div>

.slide {
  position: relative;
  margin: auto;
  width: 600px;
  height: 200px;
  text-align: center;
  font-family: Arial;
  color: #FFF;
  overflow: hidden;
}

.slide ul {
  margin: 10px 0;
  padding: 0;
  width: calc(600px * 3);
  transition: all 0.5s;
}

.slide li {
  float: left;
  width: 600px;
  height: 200px;
  list-style: none;
  line-height: 200px;
  font-size: 36px;
}

.slide li:nth-child(1) {
  background: #9fa8ef;
}

.slide li:nth-child(2) {
  background: #ef9fb1;
}

.slide li:nth-child(3) {
  background: #9fefc3;
}

.slide input[name="sildeInput"] {
  display: none;
}

.slide label[for^="sildeInput"] {
  position: absolute;
  top: 170px;
  width: 20px;
  height: 20px;
  margin: 0 10px;
  line-height: 20px;
  color: #FFF;
  background: green;
  cursor: pointer;
  border-radius: 50%;
}

.slide label[for="sildeInput1"] {
  left: 0;
}

.slide label[for="sildeInput2"] {
  left: 30px;
}

.slide label[for="sildeInput3"] {
  left: 60px;
}

#sildeInput1:checked~ul {
  margin-left: 0;
}

#sildeInput2:checked~ul {
  margin-left: -600px;
}

#sildeInput3:checked~ul {
  margin-left: -1200px;
}

#sildeInput1:checked~label[for="sildeInput1"] {
    color: #000;
    background: #fff;
}

#sildeInput2:checked~label[for="sildeInput2"] {
    color: #000;
    background: #fff;
}

#sildeInput3:checked~label[for="sildeInput3"] {
    color: #000;
    background: #fff;
}

https://www.98891.com/article-35-1.html

二、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-master\package目录下有这两个文件；

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 >
    <div >
        <div >Slide 1</div>
        <div >Slide 2</div>
        <div >Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div ></div>

    <!-- 如果需要导航按钮 -->
    <div ></div>
    <div ></div>

    <!-- 如果需要滚动条 -->
    <div ></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中。

码农公寓

一、css实现轮播图

二、swiper插件实现方式

相关文章