|
本帖最后由 尘韩韩 于 2020-12-18 16:54 编辑
swiper整屏滚动- 异步加载动态数据( 数据半小时刷新下),出现的问题是:向左滚动的时候 到最后一屏的时候会回退到上一屏 然后继续回退到第一屏(反向)
不知道什么原因,求大神
<script type="text/javascript">
$(function () {
getData();
setInterval(function () {
getData();
// window.location.reload();//刷新当前页面.
//console.log("11");
}, 1000*60*30);
});
function getData(){
$.ajax({
url: "/Handler/GetAdInfo.ashx",
datatype: "json",
type: "GET",
success: function (data) {
$(".swiper-wrapper").empty();//每次点击按钮清空原来数据,防止无限加载。
var datalist = '';
$.each(eval(data).filter(function (e) { return e.Types == '1' || e.Types == '2'; }), function (n, item) {
if (item.Types == '2') {
datalist += "<div class='swiper-slide'><ul class='w1200'><li><div class='info_wrapper'><div class='aimg'><img src='" + item.ImageUrl + "'/></div><div class='info_item'><div class='info_li'>" + item.Content + "</div></div></div><div class='clearfix'></div></div></li></ul></div>";
}
if (item.Types == '1') {
datalist += "<div class='swiper-slide'><ul class='w1200' style='transform: matrix(1, 0, 0, 1, 0, 0);'><li><div class='img_box'><img src='" + item.ImageUrl + "'/></div></li></ul></div>";
}
});
var j = 0;
$.each(eval(data).filter(function (e) { return e.Types == '3'; }), function (n, item) {
if (j % 9 == 0) {
if (j > 0) {
datalist += "</ul></div><div class='swiper-slide'>";
}
else {
datalist += "<div class='swiper-slide'>";
}
datalist += "<ul>";
}
datalist += "<li>";
if (item.ImageUrl != '') {
datalist += "<div class='photo'><img src='" + item.ImageUrl + "'></div>";
}
datalist += "<div class='intro'><h2>" + item.Content + "</h2><p>联系电话:<span>" + item.Mobile + "</span></p><p>发布时间:<span>" + item.AddDate + "</span></p>";
if (item.ClassName == '房产信息') {
datalist += "<p class='sort blue_bg'>";
}
else if (item.ClassName == '物品交换') {
datalist += "<p class='sort red_bg'>";
}
else if (item.ClassName == '求职就业') {
datalist += "<p class='sort pink_bg'>";
}
else {
datalist += "<p class='sort blue_bg'>";
};
// datalist += "<p class='sort blue_bg'>";
datalist += "信息分类:<span>" + item.ClassName + "</span></p></div><div class='clear'></div></li>";
j++;
})
// datalist += "</ul></div>";
//$("#datainfo").append(datalist);
$(".swiper-wrapper").html(datalist);
var swiper = new Swiper('.swiper-container', {
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true//修改swiper的父元素时,自动初始化swiper
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 0,
centeredSlides: true,
autoplay:20000,
loop: true,
speed:2000,
autoplayDisableOnInteraction: false,
//effect: 'fade'
});
}
});
}
</script>
|
|