Swiper ajax 左右切换，下拉加载更多

<div class="page"> 
<!-- tab代码 开始 -->
 
    <div class="tabs">
         <a href="javascript:;" hidefocus="true" class="active">tabl1</a> 
      <a href="javascript:;" hidefocus="true" >tab2</a> 
    </div>    
    <div class="swiper-container">
    <div class="swiper-wrapper" >
    <!-- 内容1 -->
        <div class="swiper-slide" id="content1">
         <c:forEach items="${dto.list }" var="item" varStatus="st">
              <div class="zxbox">
                          ${item.title }
               </div>  
          </c:forEach>
          <div class="moreIdeas"></div>
        </div>
        <!-- 内容2 -->
        <div class="swiper-slide">
              <div class="main">
       test
    </div>
        </div> 


   </div>


   </div>


<!-- 代码 结束 -->
</div>

<c:if test="${dto.totalPages > 1 }">
<div class="weui-infinite-scroll" id="infinite-demo-1">
 <div class="infinite-preloader"></div>
 正在加载...
</div>
</c:if> 

<input type="hidden" value="${dto.page }" id="page">
<input type="hidden" value="${dto.totalPages }" id="totalPages"> 
<script src="${ly }/js/jquery-2.1.4.js"></script>
<script src="${ly }/js/swiper-3.3.1.jquery.min.js"></script>
<script src="${ly }/js/jquery-weui.js"></script>
<script src="${ly }/js/jquery.json-2.2.min.js"></script>
<script src="${ly }/js/utils.js"></script>

<script>

$(function () {

var tabsSwiper = new Swiper('.swiper-container',{
autoHeight: true, //高度随内容变化
speed:500,
effect : 'slide',
onSlideChangeStart: function(){
$(".tabs .active").removeClass('active');
$(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');
}
});

$(".tabs a").on('touchstart mousedown',function(e){
e.preventDefault()
$(".tabs .active").removeClass('active');
$(this).addClass('active');
tabsSwiper.slideTo($(this).index(), 1000, false);
});


$(".tabs a").click(function(e){
e.preventDefault();

});

if($("#infinite-demo-1")[0]) {
   var loading = false;
   $(document.body).infinite().on("infinite", function() {
     if(loading) return;
     loading = true;
     setTimeout(function() {
    var page = $('#page').val();
    var totalPages = $('#totalPages').val();
    if (totalPages > page) {
    var object = new Object();
    object.page = parseInt(page) + 1;
    var jsoninfo = $.toJSON(object);
    $.ajax({
    type : 'POST',
    url : getRootPath() + "/front/more",
    data : jsoninfo,
    dataType : 'json',
    contentType : 'application/json',
    success : function(result) {
    var items = result.dto.list;
    var html = '';
    for (var i = 0; i < items.length; i++) {
    var item = items[i];
    html = html + '<div class="zxbox">'
    html = html + item.title
                       html = html + '</div>'
               }
    $('.moreIdeas').empty().before(html);
    $('#page').val(result.dto.page);
    tabsSwiper.appendSlide(html);
    if (object.page == totalPages) {
    $('#infinite-demo-1').hide();
    loading = true;
    }
    },
              error:function(jqXHR, textStatus, errorThrown){ 
             top.location.href=getRootPath() + "/common/error";
             }
    });
    }
     
     
       loading = false;
     }, 500);   //模拟延迟
   });
 }
});
function changeImage() {
var img = document.getElementById("vImg");
img.src = getRootPath() + '/ImageServlet?t=' + Math.random();
}
</script>