如何解决读取轮播图顺序的问题
|选项卡采用owl插件来改造的，适合用平常的浏览器可以看看，但是微信浏览器兼容性方面不太好，还有体验效果不好。如果不是侧滑的话，肯定不会影响用户体验吧。
我花了好几周没解决好，可能是自己的基础远远不够的。不过他用我做过的基础上改的，然后去解决读取顺序的问题。我就来讲一讲前端首页的选项卡问题，ajax获取动态正常的数据，但是用在插件方面，还有存在一个问题就是上面的导航栏品牌和下面显示内容的对应，两者是不一样的，而且顺序乱了。
我就交给小唐去解决这个问题，因为他比我写的js强了不少吧。
后来不到半个天解决好了，说明他有足够掌握js的知识。我问问他怎么解决了这个顺序问题，他说回调函数能够解决了吧。哎，原来我还没这个学过的，好好回家补充学一下哈。
我认真看了他的代码，就知道了他怎么去解决顺序问题。
index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>水到家</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>
<div class="component">
<!--选项卡导航栏-->
<div class="thumbnails-wrapper">
<div id="thumbnails" class="owl-carousel">
</div>
</div>
<!--选项卡显示内容-->
<div id="carousel" class="owl-carousel main-carousel">
</div>
</div>
<script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/owl.carousel.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
index.js文件
var primary = $("#carousel");
var secondary = $("#thumbnails");
function syncPosition(el) {
var current = this.currentItem;
secondary.find(".owl-item").removeClass("synced").eq(current).addClass("synced");
if(secondary.data("owlCarousel") !== undefined) {
center(current);
}
$('.current-item').html(this.owl.currentItem + 1);
$('.max-items').html(this.owl.owlItems.length);
}
secondary.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).data("owlItem");
primary.trigger("owl.goTo", number);
});
function center(number) {
var sync2visible = secondary.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible) {
if(num === sync2visible[i]) {
var found = true;
}
}
if(found === false) {
if(num > sync2visible[sync2visible.length - 1]) {
secondary.trigger("owl.goTo", num - sync2visible.length + 2);
} else {
if(num - 1 === -1) {
num = 0;
}
secondary.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length - 1]) {
secondary.trigger("owl.goTo", sync2visible[1]);
} else if(num === sync2visible[0]) {
secondary.trigger("owl.goTo", num - 1);
}
}
function call(){
primary.owlCarousel({
singleItem: true,
slideSpeed: 1000,
pagination: false,
afterAction: syncPosition,
responsiveRefreshRate: 200,
navigation: false,
navigationText: ["", ""]
});
secondary.owlCarousel({
items: 3,
itemsDesktop: [1200, 3],
itemsDesktopSmall: [992, 3],
itemsTablet: [768, 3],
itemsMobile: [480, 3],
pagination: false,
responsiveRefreshRate: 100,
/*navigation: true,
navigationText: ["", ""],*/
afterInit: function(el) {
el.find(".owl-item").eq(0).addClass("synced");
}
});
}
$.ajax({
url: '',
type: 'GET',
dataType: 'jsonp',
success: function(data) {
var pinpai=data.data;
var i=-1;
ajax();
function ajax(){
i++;
if(i>=pinpai.length){
call();
return;
}else{
$.ajax({
url: "",
async:true,
type: 'GET',
data: {
brand_id:pinpai[i].brand_id,
},
dataType: 'jsonp',
success:function(result) {
$('#thumbnails').append('<div class="item"><a class="image" href="#">'+pinpai[i].brand_name+'</a></div>');
var sP=result.data;
var str='<div class="item"><ul class="mui-table-view" id="mui-table-view">';
for(var j=0;j<sP.length;j++){
str+='<li class="mui-table-view-cell mui-media"><a href="waterticket/buywater_pop.html"><img class="mui-media-object mui-pull-left" src="images/01.png"><div class="mui-media-body">'+sP[j].goods_name+'<p class="mui-ellipsis">'+sP[j].goods_title+'</p><p class="price"><span class="money colred"><em class="smallyuan">¥</em>'+sP[j].goods_price+'</span><span class="jiuzhe"></span></p></div></a><div class="mui-numbox jiajian mui-pull-right" data-numbox-min="0" data-numbox-max="100000"><button class="mui-btn mui-numbox-btn-minus" type="button">-</button><input class="mui-numbox-input numBox" type="number" value="0" readonly="readonly" /><button data-title="农夫矿泉水2" data-price="10" class="mui-btn mui-numbox-btn-plus" type="button">+</button><input type="hidden" value="0" class="goods_totalPrice"></div></li>'
};
str+='</ul></div>';
$('#carousel').append(str);
ajax();
}
});
}
};
}
});
这个不能多说了，因为源码保密性不能随便讲一下哈。我们辛苦了研究很多天哈哈，其实收获了不少的知识，也许是值得了吧。