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

2024-03-05    分类: 网站建设

近期在网站开发过程中遇到了一个需要组合轮播图片的页面,页面布局如下:

先来讲一下具体功能是:点击左侧“公司资质”或者“产品证书”,右边切换到相应的轮播模块。中间的图片可以左右拖动切换,同时带动右边名称的选中状态切换,右边的名称点击能切换中间的图片,使对应的图片能居中放大显示,也是就是中间的当前图片与右边的名称是一一对应的。

下面再来讲一下页面布局结构如下:

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;
}
});

}

}


以上功能是基于 swiper.js 插件最新版本实现的。由于swiper 插件对ie的兼容性不是很到位,所以这里的轮播不兼容ie 低版本,也就是IE8以下的版本均不支持该效果,不过现在用IE8以下的浏览器比较少了,除了window xp系统和少部分的win 7系统外。

以上就是关于网站制作之使用swiper插件做多组合轮播(上海网站制作),希望对你有帮助,更多内容关注创新互联。

标题名称:网站制作之使用swiper插件做多组合轮播(上海网站制作)
当前路径:https://www.cdcxhl.com/news36/320136.html

成都网站建设公司_创新互联,为您提供关键词优化品牌网站设计网站内链网站建设品牌网站建设网站营销

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

搜索引擎优化