网站制作之使用swiper插件做多组合轮播(上海网站制作)

近期在网站开发过程中遇到了一个需要组合轮播图片的页面，页面布局如下：
先来讲一下具体功能是：点击左侧“公司资质”或者“产品证书”，右边切换到相应的轮播模块。中间的图片可以左右拖动切换，同时带动右边名称的选中状态切换，右边的名称点击能切换中间的图片，使对应的图片能居中放大显示，也是就是中间的当前图片与右边的名称是一一对应的。
下面再来讲一下页面布局结构如下：
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_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,//默认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;
}
});
}
}



风水树笔记之六：网络媒体谈
有赞强势“入局”百度智能小程序
没钱没资源费尽心力？或许这3种思路可以帮到你
微信这三个功能让大家期待了很久，终于出炉了!
怎样的网站建设能带来盈利？
朝阳周边app开发公司
小程序未来发展的趋势
企业竞价推广效果为何差