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

先來講一下具體功能是：點擊左側(cè)“公司資質(zhì)”或者“產(chǎn)品證書”，右邊切換到相應(yīng)的輪播模塊。中間的圖片可以左右拖動切換，同時帶動右邊名稱的選中狀態(tài)切換，右邊的名稱點擊能切換中間的圖片，使對應(yīng)的圖片能居中放大顯示，也是就是中間的當(dāng)前圖片與右邊的名稱是一一對應(yīng)的。
 
下面再來講一下頁面布局結(jié)構(gòu)如下：
 
 
 
 
除了以上的html代碼外，實現(xiàn)上述的功能還需要下面的js代碼，這些代碼看起來雖然比較復(fù)雜，但使用方法卻是比較傻瓜式，直接粘貼到頁面上就可以用，所以看不懂以下的JS代碼也沒關(guān)系，但對于一些關(guān)鍵的類名，例如上面的html代碼寫的hon_con_box1,hon_name_box1,swip_tab2等類名還是要跟JS代碼對應(yīng)起來，不然就實現(xiàn)不了多組合輪播功能，JS代碼如下：
 
if($("body").hasClass("swip_box")){
//資質(zhì)榮譽
if ($(".imgbox2").hasClass("swip_tab2")){
var sib,sib2,sib3;
if (wind_w > 780){
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; i < this.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();
//同步運行其它swiper
serSwiper1.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,//默認(rèn)true
});
$('.hon_name_box2 .swiper-slide').on( 'click', function() {
var index = $(this).index();
//同步運行其它swiper
serSwiper2.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; i < this.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_box > div').on('click', function () {
serSwiper1.autoplay.stop();
serSwiper2.autoplay.stop();
$(this).addClass('on').siblings("div").removeClass('on');
var thisIndex = $(this).index();
$(".hon_con_case > div").eq(thisIndex).show().siblings("div").hide();
switch (thisIndex)
{
case 0:
serSwiper1.autoplay.start();
break;
case 1:
serSwiper2.autoplay.start();
break;
}
});
 
}
 
}
 
 
以上功能是基于 swiper.js 插件最新版本實現(xiàn)的。由于swiper 插件對ie的兼容性不是很到位，所以這里的輪播不兼容ie 低版本，也就是IE8以下的版本均不支持該效果，不過現(xiàn)在用IE8以下的瀏覽器比較少了，除了window xp系統(tǒng)和少部分的win 7系統(tǒng)外。