Swipper.js实现轮播功能

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

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

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

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

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

所以选择了一个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>