需求:在h5页面中实现多图轮播且在手机浏览器上要可左右滑动切换图片,并显示当且页数/总页数以提示用户。
实现:由于这个功能是上上周做的,已经不记得参考了哪些大神的链接,总之应该是很多个,这里就不一一贴上了,再次感谢所有乐于分享的大神们。下面贴我的实现:
1.1下载swiper
swiper中文网:http://www.swiper.com.cn/ 里面有使用方法,很详细,基本导入相关js就可以用了。下一个简单的demo,然后根据自己的需求修改。
1.2引用swiper的html页面
href="css/ncss2.css?v=2.1.0" rel="stylesheet" type="text/css" />
href="css/thickbox.css" rel="stylesheet" type="text/css" />
href="css/bl.css?v=2.1.1" rel="stylesheet" type="text/css" />
rel="stylesheet" href="css/swiper.min.css">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>