html按钮轮播图,四种方式实现轮播图

不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。

轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~

为了方便大家观看，我把css，html，js都写在一个文件里。

swiper插件实现轮播图

swiper是一个实现轮播图很强大，上手也容易。并且也是现在app，网址等用的最多的，

官方网址：http://www.swiper.com.cn/

下载插件导入，按照教程即可实现精美效果

运行效果

GIF.gif

代码部分

Document

.swiper-container{

width: 790px;

height: 340px;

}

.jpg)

.jpg)

.jpg)

.jpg)

.jpg)

.jpg)

.jpg)

.jpg)

var mySwiper = new Swiper ('.swiper-container', {

// 滚动方向 horizontal/vertical

direction: 'horizontal',

// 自动播放

autoplay:2000,

// 是否循环播放

loop: true,

// 如果需要分页器(小圆点)

// 是否需要分页器

pagination: '.swiper-pagination',

// 点击分页器是否切换到对应的图片 是 true 否 false

paginationClickable:true,

// 如果需要前进后退按钮

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

// 用户操作swiper之后，是否禁止autoplay。默认为true：停止。

// 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。

// 操作包括触碰，拖动，点击pagination等。

autoplayDisableOnInteraction:false,

})