解决banner中触摸与点击事件区分

www/webapp/o2o/css/home.css

@@ -3,7 +3,7 @@ body {
 }
 
 /*swiper*/
-.swiper-container {
+/*.swiper-container {
     width: 100%;
 }
 
@@ -11,7 +11,7 @@ body {
     text-align: center;
     font-size: 18px;
     background: #fff;
-    /* Center slide text vertically */
+    !* Center slide text vertically *!
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
@@ -34,7 +34,7 @@ body {
     background-color: #516663 !important;
 }
 
-/*.swiper-pagination{
+.swiper-pagination{
     bottom: 5px;
     width: 100%;
     height: 20px;
@@ -45,6 +45,52 @@ body {
     background: #000000;
     margin:0 5px;
 }*/
+
+.swiper-container {
+    width: 100%;
+    color: #fff;
+    text-align: center;
+}
+.swiper-slide {
+    width: 100%;
+    height: 100%;
+}
+.swiper-slide .title {
+    font-style: italic;
+    font-size: 42px;
+    margin-top: 80px;
+    margin-bottom: 0;
+    line-height: 45px;
+}
+.swiper-slide img{
+    width: 100%;
+}
+.pagination {
+    position: absolute;
+    z-index: 20;
+    left: 10px;
+    bottom: 10px;
+    width: 100%;
+    text-align: center;
+}
+.swiper-pagination-switch {
+    display: inline-block;
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 10px;
+    background: rgba(153,153,153,0.5);
+    box-shadow: 0px 1px 2px #555 inset;
+    margin: 0 3px;
+    cursor: pointer;
+}
+.swiper-visible-switch {
+    background: #aaa;
+}
+.swiper-active-switch {
+    background: #190f0d;
+    box-shadow: 0px 1px 2px #555 inset;
+}s
+
 /*swiper结束*/
 .content-header {
     width: 100%;

www/webapp/o2o/js/page/home.js

@@ -246,15 +246,20 @@ define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'addr
 				setTimeout(function () {
 					pageData.scroll = new IScroll('#homeScroll');
 					var swiper = new Swiper('.swiper-container', {
-						pagination: '.swiper-pagination',
-						nextButton: '.swiper-button-next',
-						prevButton: '.swiper-button-prev',
-						paginationClickable: true,
+					/*	paginationClickable: true,
+						pagination: '.pagination',
 						spaceBetween: 30,
 						centeredSlides: true,
 						autoplay: 1500,
+						autoplayDisableOnInteraction: false*/
+						pagination: '.pagination',
+						loop : true,
+						paginationClickable: true,
+						centeredSlides: true,
+            autoplay: 1500,
 						autoplayDisableOnInteraction: false
 					});
+					$('.swiper-container').height($('.swiper-container img').height());
 				}, 200);
 
 				// 目前的作用只是供后端判断，该用户是否为新用户，所以没有回调。

www/webapp/o2o/tpl/home/index.html

@@ -135,7 +135,7 @@
 				<div class="scroller">
 					<div class="home-content">
 						<!-- Swiper -->
-						<div class="swiper-container">
+						<!--<div class="swiper-container">
 							<div class="swiper-wrapper">
 								<div class="swiper-slide">
 									<img src="http://odulvej8l.bkt.clouddn.com/%E7%AE%A1%E5%AE%B6.jpg" alt="">
@@ -147,8 +147,22 @@
 									<img src="http://odulvej8l.bkt.clouddn.com/%E7%AE%A1%E5%AE%B6-2.jpg" alt="">
 								</div>
 							</div>
-							<!-- 如果需要分页器 -->
+							&lt;!&ndash; 如果需要分页器 &ndash;&gt;
 							<div class="swiper-pagination" style="bottom: 5px"></div>
+						</div>-->
+						<div class="swiper-container">
+							<div class="swiper-wrapper">
+								<div class="swiper-slide">
+									<img src="http://odulvej8l.bkt.clouddn.com/%E7%AE%A1%E5%AE%B6.jpg" alt="">
+								</div>
+								<div class="swiper-slide btn-banner-recharge">
+									<img src="http://odulvej8l.bkt.clouddn.com/banner-2.jpg" alt="">
+								</div>
+								<div class="swiper-slide btn-banner-coupon">
+									<img src="http://odulvej8l.bkt.clouddn.com/%E7%AE%A1%E5%AE%B6-2.jpg" alt="">
+								</div>
+							</div>
+							<div class="pagination"></div>
 						</div>
 						<img class="home-remy" src="http://odulvej8l.bkt.clouddn.com/%E5%9B%BE%E6%A0%87-01.jpg" alt="">