不论是app,还是网站,基本上都会出现轮播图,今天和大家分享几种不同工具实现轮播图的几种方式。
轮播图的基本样式和功能就不需要解释了,相信能根据题目选择看文章的话都知道啥是轮播图,如果哪位读者老爷真的让非要我解释一下啥是轮播图,求您饶了在下吧,真心词穷~
为了方便大家观看,我把css,html,js都写在一个文件里。
swiper插件实现轮播图
swiper是一个实现轮播图很强大,上手也容易。并且也是现在app,网址等用的最多的,
官方网址:http://www.swiper.com.cn/
下载插件导入,按照教程即可实现精美效果
运行效果
GIF.gif
代码部分
Document.swiper-container{
width: 790px;
height: 340px;
}
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,
})