非常优秀的JS图片轮播插件Swiper的用法
最近在一个微信公众号中用到了swiper图片轮播插件。接下来为大家介绍插件的用法
首先需要下载Swiper
1：加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
<!DOCTYPEhtml> <html> <head> ... <linkrel="stylesheet"href="path/to/swiper.min.css"> </head> <body> ... <scriptsrc="path/to/swiper.min.js"></script> </body> </html>
2.HTML内容。
<divclass="swiper-container"> <divclass="swiper-wrapper"> <divclass="swiper-slide">Slide1</div> <divclass="swiper-slide">Slide2</div> <divclass="swiper-slide">Slide3</div> </div> <!--如果需要分页器--> <divclass="swiper-pagination"></div> <!--如果需要导航按钮--> <divclass="swiper-button-prev"></div> <divclass="swiper-button-next"></div> <!--如果需要滚动条--> <divclass="swiper-scrollbar"></div> </div>
导航等组件可以放在container之外
3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container{
width:600px;
height:300px;
}
4.初始化Swiper：最好是挨着</body>标签
<script>
varmySwiper=newSwiper('.swiper-container',{
direction:'vertical',
loop:true,
//如果需要分页器
pagination:'.swiper-pagination',
//如果需要前进后退按钮
nextButton:'.swiper-button-next',
prevButton:'.swiper-button-prev',
//如果需要滚动条
scrollbar:'.swiper-scrollbar',
})
</script>
</body>
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
<scripttype="text/javascript">
window.onload=function(){
...
}
</script>
或者这样（jQuery和Zepto）
<scripttype="text/javascript">
$(document).ready(function(){
...
})
</script>
以上所述是小编给大家介绍的非常优秀的JS图片轮播插件Swiper，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！