建站学院

最近在网站建设过程中遇见了一个需要组合轮播图片的页面，页面布局如下：

先来讲一下具体功能是：点击左边公司资质或者商品证书，右侧切换到相应的轮播模块。中间的图片可以左右拖动切换，同时带动右侧名字的选中状况切换，右侧的名字点击能切换中间的图片，使对应的图片能居中放大显示，也是就是中间的目前图片与右侧的名字是一一对应的。下面再来讲一下页面布局结构如下：honor荣誉资质5公司资质16商品证书高新技术企业证书高新技术企业data|delay=.2 data|effect=fadeInUpSmall医疗器械注册证（NGS10基因）data|delay=.2 data|effect=fadeInRight医疗器械注册证（NGS10基因）除去以上的html代码外，达成上述的功能还需要下面的js代码，这类代码看着虽然比较复杂，但用法却是比较傻瓜式，直接粘贴到页面上就能用，所以看不明白以下的JS代码也没关系，但对于一些重要的类名，比如上面的html代码写的hon|con|box1,hon|name|box1,swip|tab2等类名还是要跟JS代码对应起来，不然就达成不了多组合轮播功能，JS代码如下：if($(body).hasClass(swip|box)){//资质荣誉if ($(.imgbox2).hasClass(swip|tab2)){var sib,sib2,sib3;if (wind|w780){sib = vertical;sib2 = 4;sib3 = false;} else {sib = horizontal;sib2 = auto;sib3 = true;}var serSwiper1 = new Swiper(.hon|con|box1 .swiper|container, {slideActiveClass: active,speed: 1000,spaceBetween: 10,auTOPlayDisableonInteraction : false,auTOPlay: {delay: 5000,sTOPOnLastSlide: false,disableOnInteraction: false,},on: {progress: function(progress) {var i;var modify;var translate;var scale;var zIndex;for (i = 0; ithis.slides.length; i++) {var slide = this.slides.eq(i);var slideProgress = this.slides[i].progress;modify = 1;if (Math.abs(slideProgress)1) {modify = (Math.abs(slideProgress) | 1) * 0.3 + 1;}translate = slideProgress * modify * sib + px;scale = 1 | Math.abs(slideProgress) / 5;zIndex = 999 | Math.abs(Math.round(10 * slideProgress));slide.transform(translateX( + translate + ) scale( + scale + ));slide.css(zIndex, zIndex);slide.css(opacity, 1);if (Math.abs(slideProgress)3) {slide.css(opacity, 0);}}},slideChangeTransitionStart: function() {updateNavPosition0();}},navigation: {nextEl: .hon|name|box1 .swiper|button|next,prevEl: .hon|name|box1 .swiper|button|prev,},observer:true,observeParents:true,});var serPageSwiper1 = new Swiper(.hon|name|box1 .swiper|container, {direction : sib,slidesPerView: sib2,allowTouchMove: false,observer:true,observeParents:true,});$(.hon|name|box1 .swiper|slide).on( click, function() {var index = $(this).index();//同步运行其它swiperserSwiper1.slideTo(index);});function updateNavPosition0() {$(.hon|name|box1 .active|nav).removeClass(active|nav);var activeNav = $(.hon|name|box1 .swiper|slide).eq(serSwiper1.activeIndex).addClass(active|nav);if (!activeNav.hasClass(swiper|slide|visible)) {if (activeNav.index()serPageSwiper1.activeIndex ) {var thumbsPerNav = Math.floor(serPageSwiper1.width / activeNav.width()) ;serPageSwiper1.slideTo(activeNav.index() | thumbsPerNav);} else {serPageSwiper1.slideTo(activeNav.index());}}}var serSwiper2 = new Swiper(.hon|con|box2 .swiper|container, {slideActiveClass: active,speed: 1000,spaceBetween: 10,auTOPlayDisableonInteraction : false,navigation: {nextEl: .hon|name|box2 .swiper|button|next,prevEl: .hon|name|box2 .swiper|button|prev,},observer:true,observeParents:true,});var serPageSwiper2 = new Swiper(.hon|name|box2 .swiper|container, {direction : sib,slidesPerView: sib2,allowTouchMove: false,observer:true,observeParents:true,preventClicks : false,//默认true});$(.hon|name|box2 .swiper|slide).on( click, function() {var index = $(this).index();//同步运行其它swiperserSwiper2.slideTo(index);});serSwiper2.on( slideChangeTransitionStart, function() {updateNavPosition1();// Do stuff here});serSwiper2.on( progress, function() {var i;var modify;var translate;var scale;var zIndex;for (i = 0; ithis.slides.length; i++) {var slide = this.slides.eq(i);var slideProgress = this.slides[i].progress;modify = 1;if (Math.abs(slideProgress)1) {modify = (Math.abs(slideProgress) | 1) * 0.3 + 1;}translate = slideProgress * modify * sib + px;scale = 1 | Math.abs(slideProgress) / 5;zIndex = 999 | Math.abs(Math.round(10 * slideProgress));slide.transform(translateX( + translate + ) scale( + scale + ));slide.css(zIndex, zIndex);slide.css(opacity, 1);if (Math.abs(slideProgress)3) {slide.css(opacity, 0);}}});function updateNavPosition1() {$(.hon|name|box2 .active|nav).removeClass(active|nav);var activeNav = $(.hon|name|box2 .swiper|slide).eq(serSwiper2.activeIndex).addClass(active|nav);if (!activeNav.hasClass(swiper|slide|visible)) {if (activeNav.index()serPageSwiper2.activeIndex ) {var thumbsPerNav = Math.floor(serPageSwiper2.width / activeNav.width()) ;serPageSwiper2.slideTo(activeNav.index() | thumbsPerNav);} else {serPageSwiper2.slideTo(activeNav.index());}}}serSwiper2.auTOPlay.sTOP();$(.hon|tab|nav|boxdiv).on(click, function () {serSwiper1.auTOPlay.sTOP();serSwiper2.auTOPlay.sTOP();$(this).addClass(on).siblings(div).removeClass(on);var thisIndex = $(this).index();$(.hon|con|casediv).eq(thisIndex).show().siblings(div).hide();switch (thisIndex){case 0:serSwiper1.auTOPlay.start();break;case 1:serSwiper2.auTOPlay.start();break;}});}}以上功能是基于 swiper.js 插件最新版本达成的。因为swiper 插件对ie的兼容性不是非常到位，所以这里的轮播不兼容ie 低版本，也就是IE8以下的版本均不支持该成效，不过目前用IE8以下的浏览器比较少了，除去window xp系统和少部分的win 7系统外。