我是歌谣 放弃很难 但是坚持一定很酷 微信公众号关注小歌谣

今天我们来说一下工作中的一个小需求
就是给我们的页面去实现一个轮播的功能

最近需要实现一个小的需求

就是如何类似于如何把一个图片变成一个轮播效果

于是乎就开始考虑 用一款插件去实现这个功能

所以选择了一个swipper的轮播

插件

先写一个小的demo案例


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script>
    <title>Document</title>
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
        <div class="swiper-slide">slider4</div>
    </div>
</div>
</body>
</html>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        autoplay:true,//等同于以下设置
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
          },
    });
</script>
​

​

看一下运行的结果
在这里插入图片描述

然后就实现了一个三秒滑动的效果

接着就是对移动端代码进行重构

      <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="images/index_new_banner1.png"
                                                               alt=""
                                                               class="img-responsive"></div>
                                <div class="swiper-slide"><img src="images/index_new_banner2.png"
                                                               alt=""
                                                               class="img-responsive"></div>
                                <div class="swiper-slide"><img src="images/index_new_banner3.png"
                                                               alt=""
                                                               class="img-responsive"></div>
​
                            </div>
                        </div>

本次只截取部分代码

然后就实现了轮播的功能
在这里插入图片描述
在实现我们日常的需求中 需要多总结