近期在網(wǎng)站開發(fā)過程中遇到了一個(gè)需要組合輪播圖片的頁面，頁面布局如下：
先來講一下具體功能是：點(diǎn)擊左側(cè)“公司資質(zhì)”或者“產(chǎn)品證書”，右邊切換到相應(yīng)的輪播模塊。中間的圖片可以左右拖動(dòng)切換，同時(shí)帶動(dòng)右邊名稱的選中狀態(tài)切換，右邊的名稱點(diǎn)擊能切換中間的圖片，使對應(yīng)的圖片能居中放大顯示，也是就是中間的當(dāng)前圖片與右邊的名稱是一一對應(yīng)的。
下面再來講一下頁面布局結(jié)構(gòu)如下：
honor
榮譽(yù)資質(zhì)5公司資質(zhì)16產(chǎn)品證書
高新技術(shù)企業(yè)證書高新技術(shù)企業(yè)
data-delay=".2" data-effect="fadeinupsmall">
醫(yī)療器械注冊證（ngs10基因）data-delay=".2" data-effect="fadeinright">醫(yī)療器械注冊證（ngs10基因）
除了以上的html代碼外，實(shí)現(xiàn)上述的功能還需要下面的js代碼，這些代碼看起來雖然比較復(fù)雜，但使用方法卻是比較傻瓜式，直接粘貼到頁面上就可以用，所以看不懂以下的js代碼也沒關(guān)系，但對于一些關(guān)鍵的類名，例如上面的html代碼寫的hon_con_box1,hon_name_box1,swip_tab2等類名還是要跟js代碼對應(yīng)起來，不然就實(shí)現(xiàn)不了多組合輪播功能，js代碼如下：
if($("body").hasclass("swip_box")){
//資質(zhì)榮譽(yù)
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();
//同步運(yùn)行其它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();
//同步運(yùn)行其它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;
}
});
}
}



風(fēng)水樹筆記之六：網(wǎng)絡(luò)媒體談
有贊強(qiáng)勢“入局”百度智能小程序
沒錢沒資源費(fèi)盡心力？或許這3種思路可以幫到你
微信這三個(gè)功能讓大家期待了很久，終于出爐了!
怎樣的網(wǎng)站建設(shè)能帶來盈利？
朝陽周邊app開發(fā)公司
小程序未來發(fā)展的趨勢
企業(yè)競價(jià)推廣效果為何差