> 文档中心 > 3分钟实现图片的轮播,进度条(样式自选,源码免费,超级js插件swiper)

3分钟实现图片的轮播,进度条(样式自选,源码免费,超级js插件swiper)


最强大的前端插件swiper

一:图片轮播的实现

1.源码

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Swiper demo</title>    <meta      name="viewport"      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"    />    <!-- Link Swiper's CSS -->    <link      rel="stylesheet"      href="../swiper-bundle.min.css"    />    <!-- Demo styles -->    <style>      html,      body { position: relative; height: 100%;      }      body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0;      }      .swiper { width: 100%; height: 100%;      }      .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;      }      .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;      }      body { background: #000; color: #000;      }      .swiper { width: 100%; height: 300px; margin-left: auto; margin-right: auto;      }      .swiper-slide { background-size: cover; background-position: center;      }      .mySwiper2 { height: 80%; width: 100%;      }      .mySwiper { height: 20%; box-sizing: border-box; padding: 10px 0;      }      .mySwiper .swiper-slide { width: 25%; height: 100%; opacity: 0.4;      }      .mySwiper .swiper-slide-thumb-active { opacity: 1;      }      .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;      }    </style>  </head>  <body>    <!-- Swiper -->    <div      style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"      class="swiper mySwiper2"    >      <div class="swiper-wrapper"> <div class="swiper-slide">   <img src="./images/nature-1.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-2.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-3.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-4.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-5.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-6.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-7.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-8.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-9.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-10.jpg" /> </div>      </div>      <div class="swiper-button-next"></div>      <div class="swiper-button-prev"></div>    </div>    <div thumbsSlider="" class="swiper mySwiper">      <div class="swiper-wrapper"> <div class="swiper-slide">   <img src="./images/nature-1.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-2.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-3.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-4.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-5.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-6.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-7.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-8.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-9.jpg" /> </div> <div class="swiper-slide">   <img src="./images/nature-10.jpg" /> </div>      </div>    </div>    <!-- Swiper JS -->    <script src="../swiper-bundle.min.js"></script>    <!-- Initialize Swiper -->    <script>      var swiper = new Swiper(".mySwiper", { loop: true, spaceBetween: 10, slidesPerView: 4, freeMode: true, watchSlidesProgress: true,      });      var swiper2 = new Swiper(".mySwiper2", { loop: true, spaceBetween: 10, navigation: {   nextEl: ".swiper-button-next",   prevEl: ".swiper-button-prev", }, thumbs: {   swiper: swiper, },      });    </script>  </body></html>

效果图如下:
在这里插入图片描述

二:使用方法

1.使用new Swiper(".mySwiper",{ });
mySwiper对应的是你进行滑动的模块。
Swiper容器的默认类名变更为’.swiper’,之前是’.swiper-container’。新增两个3D过渡效果,自由模式和网格组件化。

三:源码地址

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端

Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
超级插件swiper地址