用js做轮播图的代码（轮播图用js怎么写）

用js做轮播图的代码，原文标题：简简单单用javascript做轮播图，只要链接好库，不用自己写轮播。

好吧，用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做轮播图的代码（轮播图用js怎么写）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

SEO小小课堂网
SEO教程
站长导航
友情链接交换
搜素引擎算法
GEO培训
SEO小小课堂网
友情链接交换

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：会走路的一只鱼，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/569431.html

用js做轮播图的代码（轮播图用js怎么写）

随机文章

相关推荐

用js做轮播图的代码（原生js写轮播图思路）

发表评论