網站制作之使用swiper插件做多組合輪播

　　近期在網站開發過程中遇到了一個需要組合輪播圖片的頁面，頁面布局如下：

　　先來講一下具體功能是：點擊左側公司資質或者產品證書，右邊切換到相應的輪播模塊。中間的圖片可以左右拖動切換，同時帶動右邊名稱的選中狀態切換，右邊的名稱點擊能切換中間的圖片，使對應的圖片能居中放大顯示，也是就是中間的當前圖片與右邊的名稱是一一對應的。

　　下面再來講一下頁面布局結構如下：

　　honor

　　榮譽資質

　　5

　　公司資質

　　16

　　產品證書

　　高新技術企業證書

　　高新技術企業

　　<！--如果需要導航按鈕-->

　　data-delay=.2data-effect=fadeInUpSmall

　　醫療器械注冊證（NGS10基因）

　　data-delay=.2data-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)){

　　varsib，sib2，sib3;

　　if(wind_w780){

　　sib=vertical;

　　sib2=4;

　　sib3=false;

　　}else{

　　sib=horizontal;

　　sib2=auto;

　　sib3=true;

　　}

　　varserSwiper1=newSwiper('.hon_con_box

　　1.swiper-container'，{

　　slideActiveClass：'active'，

　　speed：1000，

　　spaceBetween：10，

　　autoplayDisableOnInteraction：false，

　　autoplay：{

　　delay：5000，

　　stopOnLastSlide：false，

　　disableOnInteraction：false，

　　}，

　　on：{

　　progress：function(progress){

　　vari;

　　varmodify;

　　vartranslate;

　　varscale;

　　varzIndex;

　　for(i=0;ithis.slides.length;i++){

　　varslide=this.slides.eq(i);

　　varslideProgress=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_box

　　1.swiper-button-next'，

　　prevEl：'.hon_name_box

　　1.swiper-button-prev'，

　　}，

　　observer：true，

　　observeParents：true，

　　});

　　varserPageSwiper1=newSwiper('.hon_name_box

　　1.swiper-container'，{

　　direction：sib，

　　slidesPerView：sib2，

　　allowTouchMove：false，

　　observer：true，

　　observeParents：true，

　　});

　　$('.hon_name_box

　　1.swiper-slide').on('click'，function(){

　　varindex=$(this).index();

　　//同步運行其它swiper

　　serSwiper

　　1.slideTo(index);

　　});

　　functionupdateNavPosition0(){

　　$('.hon_name_box

　　1.active-nav').removeClass('active-nav');

　　varactiveNav=$('.hon_name_box

　　1.swiper-slide').eq(serSwiper

　　1.activeIndex).addClass('active-nav');

　　if(！activeNav.hasClass('swiper-slide-visible')){

　　if(activeNav.index()serPageSwiper

　　1.activeIndex){

　　varthumbsPerNav=Math.floor(serPageSwiper

　　1.width/activeNav.width());

　　serPageSwiper

　　1.slideTo(activeNav.index()-thumbsPerNav);

　　}else{

　　serPageSwiper

　　1.slideTo(activeNav.index());

　　}

　　}

　　}

　　varserSwiper2=newSwiper('.hon_con_box

　　2.swiper-container'，{

　　slideActiveClass：'active'，

　　speed：1000，

　　spaceBetween：10，

　　autoplayDisableOnInteraction：false，

　　navigation：{

　　nextEl：'.hon_name_box

　　2.swiper-button-next'，

　　prevEl：'.hon_name_box

　　2.swiper-button-prev'，

　　}，

　　observer：true，

　　observeParents：true，

　　});

　　varserPageSwiper2=newSwiper('.hon_name_box

　　2.swiper-container'，{

　　direction：sib，

　　slidesPerView：sib2，

　　allowTouchMove：false，

　　observer：true，

　　observeParents：true，

　　preventClicks：false，//默認true

　　});

　　$('.hon_name_box

　　2.swiper-slide').on('click'，function(){

　　varindex=$(this).index();

　　//同步運行其它swiper

　　serSwiper

　　2.slideTo(index);

　　});

　　serSwiper

　　2.on('slideChangeTransitionStart'，function(){

　　updateNavPosition1();

　　//Dostuffhere

　　});

　　serSwiper

　　2.on('progress'，function(){

　　vari;

　　varmodify;

　　vartranslate;

　　varscale;

　　varzIndex;

　　for(i=0;ithis.slides.length;i++){

　　varslide=this.slides.eq(i);

　　varslideProgress=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);

　　}

　　}

　　});

　　functionupdateNavPosition1(){

　　$('.hon_name_box

　　2.active-nav').removeClass('active-nav');

　　varactiveNav=$('.hon_name_box

　　2.swiper-slide').eq(serSwiper

　　2.activeIndex).addClass('active-nav');

　　if(！activeNav.hasClass('swiper-slide-visible')){

　　if(activeNav.index()serPageSwiper

　　2.activeIndex){

　　varthumbsPerNav=Math.floor(serPageSwiper

　　2.width/activeNav.width());

　　serPageSwiper

　　2.slideTo(activeNav.index()-thumbsPerNav);

　　}else{

　　serPageSwiper

　　2.slideTo(activeNav.index());

　　}

　　}

　　}

　　serSwiper

　　2.autoplay.stop();

　　$('.hon_tab_nav_boxp').on('click'，function(){

　　serSwiper

　　1.autoplay.stop();

　　serSwiper

　　2.autoplay.stop();

　　$(this).addClass('on').siblings(p).removeClass('on');

　　varthisIndex=$(this).index();

　　$(.hon_con_casep).eq(thisIndex).show().siblings(p).hide();

　　switch(thisIndex)

　　{

　　case0：

　　serSwiper

　　1.autoplay.start();

　　break;

　　case1：

　　serSwiper

　　2.autoplay.start();

　　break;

　　}

　　});

　　}

　　}

　　以上功能是基于swiper.js插件最新版本實現的。由于swiper插件對ie的兼容性不是很到位，所以這里的輪播不兼容ie低版本，也就是IE8以下的版本均不支持該效果，不過現在用IE8以下的瀏覽器比較少了，除了windowxp系統和少部分的win7系統外。