前言：
如今咱们对“js图片轮播效果”可能比较关怀，你们都需要知道一些“js图片轮播效果”的相关资讯。那么小编同时在网摘上收集了一些有关“js图片轮播效果””的相关资讯，希望姐妹们能喜欢，兄弟们快快来了解一下吧！好吧，用swiper做轮播图其实很简单，特别是官网在使用说明上已经讲得很清楚了。但我还是在这里唠叨几下。现有的js库是很丰富的，其实我们常用到的组件都有了，轮播图就是其中之一。本文就讲一下怎么用swiper做轮播图，因为它是一个很出名的轮播图组件。更多文章请关注我的头条号，我是落笔承冰。
一、百度一下“swiper”，进入它的中文官网。
swiper历经了多个版本，我们就用最新的swiper4来说说吧。
二、调用swiper的方法有很多种，比如用npm安装之类的，这里我们就用下载css和js库文件来实现吧。
解压后，里面有很多文件，找哪个呢？就是这两个，一个是css，一个是js。
三、我们创建一个空白test.html文件来添加swiper。
引用刚才我们下载的那两个文件。
四、开始做html部分。
接下来放入轮播的模块了。
五、大家知道html只是一个外表，js才是内核，于是我们加入js部分。
轮播是可以用了，但是真的很很不成看，只有一个很小的范围可以轮播。
六、我们试着改一下轮播图的大小，并加个颜色。
我们用谷歌浏览器F12进入控制台，模拟手机界面看一下效果。
七、果然是满宽高只有一半，可怎么划动，只能划到第三块，怎么样才能让三回到一，循环划动呢，加个loop:true就可以了。
然后我们再改改样式，让里面的字变大居中，变白色，再把body的边距去掉。
八、再加个功能，让它自动播，我不动手，让它每秒跑到下一下张图。
九、我们再加个分页器，分页器是什么东西，就是轮播下方的一个个小圆点，一点就是一页，这里我们应该有三个点。
十、小圆点是有了，也会随图滚动了，可是它不能点击啊，那好，我们加入这个就可以了点了。
还真的可以点击了。
十一、人家的轮播图有左右按钮可以控制图片上一张下一张，我们也可以加。
在js里声明相应的对象
十二、即然只是入门，那么到这里就可以了，更多的使用方法，大家可以去官网查一下，最后，我把图片放进去，做出真正的轮播图吧。
我搞了三张图，三张图宽高大小不一，直接放进去了，多少会让某些图片少一截或是只看见一部分，这个问题大家自己修改图片或添加样式来处理了，我就不再说了。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./swiper.min.css"> <script src="./swiper.min.js"></script> <style> .swiper-container{ width: 100vw; height:50vh; background: red; } .swiper-wrapper{ color: white; text-align: center; line-height: 50vh; font-size: 30px; } /* vw,vh是以100为满的显示单位w为宽h为高 这里我是屏幕的满，高度的一半 */ body{ margin: 0px; } </style></head><body> <div class="swiper-container"> <!-- 这是一个swiper容器，所有swiper用到的东西都会放在这里面。 --> <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> <script> var myswp = new Swiper ('.swiper-container',{ loop: true, autoplay: { disableOnInteraction: false, //手动滑动之后不打断播放 delay: 2000,//自动轮播的时间，我这里1秒有点快哦 }, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); // 创建一个swiper对象，让它关联html里的元素，基本的轮播图就出来了 // 好吧，没有图，我们先做没有图的轮播吧。 </script></body></html> 标签： #js图片轮播效果
