大概功能就是上面5个圈无线循环滚动，每次滑动中间的变大，下面显示中间的圈所对应的内容。
html代码
js代码
//初始化数据 $scope.deskList = [{ "serviceDeskOid": "111111", "category": "Admin", "enable": true, "serviceDeskDetails": [{ "serviceDeskOid": "123", "serviceDeskDetailOid": "123", "type": "机票预定（7*24）", "pattern": "Contact模式", "url": "123", "contact": "123", "description": "描述", "briefDesc": "描述" }, { "serviceDeskOid": "34b96ef6-e", "serviceDeskDetailOid": "771461279b003", "type": "机票预定（5*8）", "pattern": "Contact模式", "url": "", "contact": "", "description": "测试数据", "briefDesc": "测试数据" }, { "serviceDeskOid": "34b96ef6-8a28be", "serviceDeskDetailOid": "f28170757b11254f", "type": "会议服务", "pattern": "Contact模式", "url": "", "contact": "", "description": "1.预作段和需连续多报修", "briefDesc": "提供会议持服务" }] }, { "serviceDeskOid": "acefd0309a", "category": "Fin.", "enable": true, "serviceDeskDetails": [{ "serviceDeskOid": "acef84309a", "serviceDeskDetailOid": "b824fcd2", "type": "供应商付款资讯", "pattern": "Q&A模式", "url": "", "contact": "", "phone": "", "email": "", "description": "银行付款流程", "briefDesc": "" }, { "serviceDeskOid": "acefd0884309a", "serviceDeskDetailOid": "5825dc133", "type": "员工报销资讯", "pattern": "Q&A模式", "url": "", "contact": "", "phone": "", "email": "", "description": "现金及差旅报销流程", "briefDesc": "" }] }, { "serviceDeskOid": "f8d174948", "category": "HR", "enable": true, "serviceDeskDetails": [{ "serviceDeskOid": "f8d192b4-c174948", "serviceDeskDetailOid": "2d9253a9a35a", "type": "HR服务", "pattern": "Contact模式", "url": "", "contact": "", "description": "咨询HR相操作等问题", "briefDesc": "" }, { "serviceDeskOid": "f8d1fa74948", "serviceDeskDetailOid": "37ead17d63c9f166", "type": "医疗保险客服热线（非工作时间）", "pattern": "Contact模式", "url": "", "contact": "", "description": "了解商业保险保障内容，保险理赔流程，理赔查询等", "briefDesc": "" }, { "serviceDeskOid": "f8d174948", "serviceDeskDetailOid": "122696920a", "type": "医疗保险客户代表（仅工作时间）", "pattern": "Contact模式", "url": "", "contact": "孙玲", "description": "了解商业保险保障内容，保险理赔流程，理赔查询等", "briefDesc": "" }, { "serviceDeskOid": "f8fa174948", "serviceDeskDetailOid": "b363ece9fdbcf", "type": "医疗保险客户代表（仅工作时间）", "pattern": "Contact模式", "url": "", "contact": "倪薇樺", "description": "了解商业保险保障内容，保险理赔流程，理赔查询等", "briefDesc": "" }, { "serviceDeskOid": "f8d192b4fa174948", "serviceDeskDetailOid": "bdac2491c433", "type": "工资咨询", "pattern": "Contact模式", "url": "", "contact": "", "phone": "4006700076", "email": "", "description": "工资单密码查询，工资明细咨询等", "briefDesc": "" }] }, { "serviceDeskOid": "2e157ca57", "category": "Legal", "enable": true, "serviceDeskDetails": [{ "serviceDeskOid": "2e15b6a57", "serviceDeskDetailOid": "be67c8a4558", "type": "法务审核流程Q&A", "pattern": "Q&A模式", "url": "", "contact": "", "description": "合同审核流程", "briefDesc": "" }, { "serviceDeskOid": "2e15b17a-67ca57", "serviceDeskDetailOid": "e53cc11f4c8", "type": "合规举报热线", "pattern": "Contact模式", "url": "", "contact": "", "description": "合规举报热线com", "briefDesc": "" }] }, { "serviceDeskOid": "a122c22d-ca1785b4b2", "category": "IT", "enable": true, "serviceDeskDetails": [{ "serviceDeskOid": "a122c27b1785b4b2", "serviceDeskDetailOid": "94f92901507ace", "type": "BI", "contact": "", "phone": "", "email": "", "description": null, "briefDesc": "" }, { "serviceDeskOid": "a122c22d-b1785b4b2", "serviceDeskDetailOid": "ac60b976-5e8d8b", "type": "IT服务热线（8:00～19:00）", "pattern": "Contact模式", "url": "", "contact": "", "description": "1.桌面系统问题支持", "briefDesc": "提供IT相关支持服务" }, { "serviceDeskOid": "a122c22d-cac9-4785b4b2", "serviceDeskDetailOid": "828-33afc", "type": "IT服8:00）", "pattern": "Contact模式", "url": "", "contact": "", "description": "1.桌面系题支持", "briefDesc": "提供I持服务" }] }]; var count = $scope.deskList.length; for (var i = 0; i < $scope.deskList.length; i++) { if ($scope.deskList[i].category.toUpperCase() === "ADMIN") { var meeting = { "serviceDeskOid": "34b96ef6-930c-4691-94d6-978ab88a28be", "serviceDeskDetailOid": "d9fda16e-6758-4b02-9e92-a2ed716850a8", "type": "会议室地图", "pattern": "Contact模式", "url": "", "contact": "", "phone": "", "email": "", "description": "meeting", "briefDesc": "提供各楼层平面图" }; $scope.deskList[i].serviceDeskDetails.unshift(meeting); } } console.log("=======", angular.toJson(count, true)); var loopCount = 9; var index = 0; var halfLoop = parseInt(loopCount / 2) + 1; var halfStart = halfLoop * count; var halfEnd = (halfLoop + 1) * count; console.log("=======", angular.toJson(halfLoop, true)); console.log("=======", angular.toJson(halfStart, true)); console.log("=======", angular.toJson(halfEnd, true)); var swiper = new Swiper('.swiper-container', { spaceBetween: 10, slidesPerView: 5, centeredSlides: true, slideToClickedSlide: true, grabCursor: true, onSlidePrevEnd: function (swiper) { console.log("onSlidePrevEnd", swiper.realIndex); console.log(index); index = swiper.realIndex % count; if (swiper.realIndex < halfStart) { swiper.slideTo(halfStart + index, 0, false) } getList(index); }, onSlideNextEnd: function (swiper) { index = swiper.realIndex % count; console.log("onSlideNextEnd", swiper.realIndex); console.log(index); if (swiper.realIndex > halfEnd) { swiper.slideTo(halfStart + index, 0, false) console.log("========", halfStart + index); } getList(index); }, }); for (var j = 0; j < loopCount; j++) { for (var i = 0; i < count; i++) { swiper.appendSlide(' ' ); } } swiper.slideTo(halfStart, 0, false); console.log(angular.toJson(swiper.realIndex, true)); console.log(angular.toJson(index, true)); $scope.selectDetail = $scope.deskList[0]; console.log(angular.toJson($scope.selectDetail, true)); function getList(index) { $scope.view.status = true; $scope.selectDetail = ""; $timeout(function () { $scope.selectDetail = $scope.deskList[index]; if ($scope.selectDetail.category.toUpperCase() === "ADMIN") { $scope.view.sf = true; } else { $scope.view.sf = false; } $scope.view.status = false; }, 10); }
循环逻辑后期补上。