js实现图片轮播后台返回数据拼接轮播效果没有了
类型选择:
<div class="dfilter_item">
<select id="title" name="title" class="form-control filter_lg">
<option value="-1">职位筛选</option>
<option value="0">主任医师</option>
<option value="1">副主任医师</option>
<option value="2">主治医师</option>
<option value="3">住院医师</option>
</select>
</div>
图片轮播代码:
<div class="swiper-container2">
<div class="swiper-wrapper">
<c:forEach items="${doctors }" var="doctors" >
<div class="swiper-slide"><a href="<c:url value='/doctor/${doctors.id}/showDoctorDetail.htm' />"><img src="<c:url value='/static/imges/toux.png' />"></a>
<div class="text">
<div class="text_title">${doctors.realname }<span class="text_p">
<c:if test="${doctors.title == 0 }">主任医师</c:if>
<c:if test="${doctors.title == 1 }">副主任医师</c:if>
<c:if test="${doctors.title == 2 }">主治医师</c:if>
<c:if test="${doctors.title == 3 }">住院医师</c:if>
</span></div>
<div class="box">
<p>简介:
<c:if test="${fn:length(doctors.introduction) > 28}"><c:out value="${fn:substring(doctors.introduction, 0, 27)}" escapeXml="false" />...</c:if>
<c:if test="${fn:length(doctors.introduction) <= 28}"><c:out value="${doctors.introduction }" escapeXml="false" /></c:if>
</p>
<p>评分:${doctors.commentRate }分</p>
</div>
</div>
</div>
</c:forEach>
</div>
</div>
js实现轮播:
<script type="text/javascript" src="<c:url value='/static/js/jquery-1.9.1.min.js' />" ></script>
<script type="text/javascript" src="<c:url value='/static/js/swiper.jquery.min.js' />" ></script>
<script type="text/javascript">
var newswiper = new Swiper('.swiper-container2', {
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 10,
});
</script>
通过jquery按类型查找到所需的图片返回jsp页面,拼接如下:
$("#departmentId,#title,#ai").change(function(){
var departmentId = $("#departmentId").val();
var titleTemp = $("#title").val();
var ai = $("#ai").val();
$.ajax({
url: '<c:url value="/doctor/doctorFilter.json" />',
type:'post',
data:'departmentId='+departmentId+'&title='+titleTemp+'&ai='+ai,
dataType:'json',
success:function(data){
var item = '';
for(var i=0;i<data.doctors.length;i++){
var title = '';
if(data.doctors[i].title == 0){
title = '主任医师';
}else if(data.doctors[i].title == 1){
title = '副主任医师';
}else if(data.doctors[i].title == 2){
title = '主治医师';
}else if(data.doctors[i].title == 3){
title = '住院医师';
}
var realname = data.doctors[i].realname;
var introduction = data.doctors[i].introduction;
if(data.doctors[i].introduction.length > 28){
introduction = data.doctors[i].introduction.substring(0,27) + '...';
}
var commentRate = data.doctors[i].commentRate;
if(commentRate == null || commentRate == "" ){
commentRate = 4.5;
}
var id = data.doctors[i].id;
var newhref = '<c:url value="/doctor/'+id+'/showDoctorDetail.htm" />';
item = item +'<div class="swiper-slide">'+
'<a href="'+newhref+'">'+
'<img src="<c:url value='/static/imges/toux.png' />">'+'</a>'+
'<div class="text">'+
'<div class="text_title">'+realname+
'<span class="text_p"> '+
title+
'</span></div>'+
'<div class="box">'+
'<p>简介:'+
introduction+
'</p>'+
'<p>评分:'+commentRate+'分</p>'+
'</div>'+
'</div>'+
'</div>';
}
item = '<div class="swiper-wrapper">'+item+'</div>';
var bcd = '<script type="text/javascript" src="<c:url value='/static/js/swiper.min.js' />" />'+
'<script type="text/javascript">'+
'var newswiper = new Swiper(".swiper-container2", {'+
'slidesPerView: 3,'+
'paginationClickable: true,'+
'spaceBetween:10'+
'})';
$(".swiper-container2").empty();
$(".swiper-container2").append(item);
$(".swiper-container2").append(bcd);
}
});
});
请问我这么写有什么问题吗?为什么拼接返回后图片动不了了,只能右移不能左移了,就是轮播效果没有了?要什么解决,哪位大哥知道的,帮忙下,谢谢!!!!(用的事swiper插件实现的轮播)