移动端轮播图插件使用说明+代码详解

此案例中:移动端轮播图使用的是swiper 3.4.2 版本

1. 引入css样式文件:
2. 引入轮播图HTML代码块:
3. 引入swiper 3.4.2 版本js文件
4. 初始化swiper功能
5. 调节样式(即.将轮播图图片样式:高度100%,display:block)

class = swiper-*** 的div, 是必须要有的.
jd-layout 是body标签内网页内容最大的盒子
jd-banner是该轮播图部分外层大盒子

<div class="jd-layout">
	<div class = "jd-banner">
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide"><img src="./images/banner01.jpg" alt=""></div>
		        <div class="swiper-slide"><img src="./images/banner02.jpg" alt=""></div>
		        <div class="swiper-slide"><img src="./images/banner03.jpg" alt=""></div>
		 	</div>
		 	
		    <!-- 如果需要分页器,就加下面这行代码-->
		    <div class="swiper-pagination"></div>
		    
		    <!-- 如果需要导航按钮 -->
		    <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div>
		    
		    <!-- 如果需要滚动条 -->
		    <div class="swiper-scrollbar"></div>
		</div>
	</div>
</div>

	导航等组件可以放在container之外
	3. 设置css样式 
		//  最外面的大盒子
		.jd-layout {
		    max-width: 640px;
		    min-width: 320px;
		    height: 1000px;
		    margin: 0 auto;
		    background-color: #fff;
		}
		.jd-banner img {
		    height: 100%;
		    // 宽高设置为100%,目的是:融合最外面盒子(jd-container)
		    // 注意将图片设置为block(不受行内块元素换行间隙特性的影响)
		    display: block;
		}
	
	4.初始化Swiper：最好是挨着</body>标签
	<script src="./lib/swiper/swiper.js"></script>
	<script>        
		  var mySwiper = new Swiper ('.swiper-container', {
		    direction: 'vertical',
		    loop: true,
		    
		    // 如果需要分页器(就是小圆点)
		    pagination: '.swiper-pagination',
		    
		    // 如果需要前进后退按钮
		    nextButton: '.swiper-button-next',
		    prevButton: '.swiper-button-prev',
		    
		    // 如果需要滚动条
		    scrollbar: '.swiper-scrollbar',
		  })        
	</script>