From 4c61ea2c8f8aa28be52ce3392296ae6ad8fc34b2 Mon Sep 17 00:00:00 2001 From: liuqimichale <123456lq> Date: Wed, 10 Oct 2018 14:31:12 +0800 Subject: [PATCH] 产品介绍 Swiper --- css/portfollo.css | 104 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------- images/portfolio-analysis1.png | Bin 0 -> 306962 bytes images/portfolio-analysis2.png | Bin 0 -> 310593 bytes images/portfolio-analysis3.png | Bin 0 -> 283887 bytes images/portfolio-analysis4.png | Bin 0 -> 287842 bytes images/portfolio-pc.png | Bin 0 -> 38055 bytes images/portfolio-pc1.png | Bin 0 -> 115136 bytes images/portfolio-pc2.png | Bin 0 -> 69253 bytes images/portfolio-pc3.png | Bin 0 -> 87731 bytes images/portfolio-pc4.png | Bin 0 -> 88296 bytes js/portfollo.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- portfolio.html | 42 ++++++++++++++++++++++++++++++++++++------ 12 files changed, 195 insertions(+), 16 deletions(-) create mode 100644 images/portfolio-analysis1.png create mode 100644 images/portfolio-analysis2.png create mode 100644 images/portfolio-analysis3.png create mode 100644 images/portfolio-analysis4.png create mode 100644 images/portfolio-pc.png create mode 100644 images/portfolio-pc1.png create mode 100644 images/portfolio-pc2.png create mode 100644 images/portfolio-pc3.png create mode 100644 images/portfolio-pc4.png diff --git a/css/portfollo.css b/css/portfollo.css index 5e946c6..66dce42 100644 --- a/css/portfollo.css +++ b/css/portfollo.css @@ -70,22 +70,56 @@ width: 50%; padding-left: 100px; } +.ortfolio-soft-bottom-2>li:nth-of-type(1){ + padding-left: 100px; +} +.ortfolio-soft-bottom-3>li:nth-of-type(1){ + padding-left: 100px; +} .ortfolio-soft-bottom-1>li:nth-of-type(1) .swiper-slide{ height: 500px; } -#portfolio-rnt-wrap{ +.portfolio-rnt-wrap{ width: 50%; height: 500px; float: left; background: url("../images/portfolio-rnt.png") no-repeat -35px 0; overflow: hidden; } +.portfolio-pc-wrap{ + width: 50%; + height: 500px; + float: left; + background: url("../images/portfolio-pc.png") no-repeat center center; + background-size: 100% 70%; + overflow: hidden; +} + .portfolio-analysis-wrap{ + width: 50%; + height: 500px; + float: left; + background: url("../images/portfolio-pc.png") no-repeat center center; + background-size: 100% 70%; + overflow: hidden; + } #portfolio-rnt{ width: 300px; height: 500px; margin-left: 215px; margin-top: 23px; } +#portfolio-pc{ + width: 473px; + height: 300px; + margin-left: 63px; + margin-top: 93px; +} +#portfolio-analysis{ + width: 473px; + height: 300px; + margin-left: 63px; + margin-top: 93px; +} #portfolio-rnt .portfolio-rnt1{ width:100%; height: 500px; @@ -106,20 +140,72 @@ height: 500px; background: url("../images/portfolio-rnt4.png") no-repeat ; } + +#portfolio-pc .portfolio-pc1{ + width:100%; + height: 300px; + background: url("../images/portfolio-pc1.png") no-repeat ; + background-size: 100% 100%; +} + +#portfolio-pc .portfolio-pc2{ + width:100%; + height: 300px; + background: url("../images/portfolio-pc2.png") no-repeat ; + background-size: 100% 100%; +} + +#portfolio-pc .portfolio-pc3{ + width:100%; + height: 300px; + background: url("../images/portfolio-pc3.png") no-repeat ; + background-size: 100% 100%; +} + +#portfolio-pc .portfolio-pc4{ + width:100%; + height: 300px; + background: url("../images/portfolio-pc4.png") no-repeat ; + background-size: 100% 100%; +} +#portfolio-analysis .portfolio-analysis1{ + width:100%; + height: 300px; + background: url("../images/portfolio-analysis1.png") no-repeat ; + background-size: 100% 100%; +} +#portfolio-analysis .portfolio-analysis2{ + width:100%; + height: 300px; + background: url("../images/portfolio-analysis2.png") no-repeat ; + background-size: 100% 100%; +} +#portfolio-analysis .portfolio-analysis3{ + width:100%; + height: 300px; + background: url("../images/portfolio-analysis3.png") no-repeat ; + background-size: 100% 100%; +} +#portfolio-analysis .portfolio-analysis4{ + width:100%; + height: 300px; + background: url("../images/portfolio-analysis4.png") no-repeat ; + background-size: 100% 100%; +} .ortfolio-soft-bottom-1 li:nth-of-type(2){ padding-left: 100px; } -.ortfolio-soft-bottom-2 li:nth-of-type(1){ - background: url("../images/ortfolio-soft-pc1.gif") no-repeat center center; - background-size: 100% 80%; -} +/*.ortfolio-soft-bottom-2 li:nth-of-type(1){*/ + /*background: url("../images/ortfolio-soft-pc1.gif") no-repeat center center;*/ + /*background-size: 100% 80%;*/ +/*}*/ .ortfolio-soft-bottom-2 li:nth-of-type(2){ padding-left:100px; } -.ortfolio-soft-bottom-3 li:nth-of-type(1){ - background: url("../images/ortfolio-soft-pc2.gif") no-repeat center center; - background-size: 100% 80%; -} +/*.ortfolio-soft-bottom-3 li:nth-of-type(1){*/ + /*background: url("../images/ortfolio-soft-pc2.gif") no-repeat center center;*/ + /*background-size: 100% 80%;*/ +/*}*/ .ortfolio-soft-bottom-3 li:nth-of-type(2){ padding-left:100px; } diff --git a/images/portfolio-analysis1.png b/images/portfolio-analysis1.png new file mode 100644 index 0000000..06f1775 Binary files /dev/null and b/images/portfolio-analysis1.png differ diff --git a/images/portfolio-analysis2.png b/images/portfolio-analysis2.png new file mode 100644 index 0000000..9cb4761 Binary files /dev/null and b/images/portfolio-analysis2.png differ diff --git a/images/portfolio-analysis3.png b/images/portfolio-analysis3.png new file mode 100644 index 0000000..6c2185e Binary files /dev/null and b/images/portfolio-analysis3.png differ diff --git a/images/portfolio-analysis4.png b/images/portfolio-analysis4.png new file mode 100644 index 0000000..7dccbc1 Binary files /dev/null and b/images/portfolio-analysis4.png differ diff --git a/images/portfolio-pc.png b/images/portfolio-pc.png new file mode 100644 index 0000000..a7c2669 Binary files /dev/null and b/images/portfolio-pc.png differ diff --git a/images/portfolio-pc1.png b/images/portfolio-pc1.png new file mode 100644 index 0000000..1f2bf44 Binary files /dev/null and b/images/portfolio-pc1.png differ diff --git a/images/portfolio-pc2.png b/images/portfolio-pc2.png new file mode 100644 index 0000000..cf427f2 Binary files /dev/null and b/images/portfolio-pc2.png differ diff --git a/images/portfolio-pc3.png b/images/portfolio-pc3.png new file mode 100644 index 0000000..4c159ff Binary files /dev/null and b/images/portfolio-pc3.png differ diff --git a/images/portfolio-pc4.png b/images/portfolio-pc4.png new file mode 100644 index 0000000..f160fcf Binary files /dev/null and b/images/portfolio-pc4.png differ diff --git a/js/portfollo.js b/js/portfollo.js index 40beb55..a50adc6 100644 --- a/js/portfollo.js +++ b/js/portfollo.js @@ -5,6 +5,67 @@ $('#portfolio-soft-wrap li').on('click',function () { $('#portfolio-soft-wrap li').children('div').addClass('displaynone'); $('#portfolio-soft-wrap li').eq(_index).children('div').removeClass('displaynone'); $('#portfolio-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone'); + if (_index == 0){ + new Swiper ('#portfolio-rnt', { + direction: 'horizontal', + loop: true, + speed: 500, //设置轮播时长 可以不设置 会有个默认值 + autoplay: true,//可选选项，自动滑动 + // 如果需要分页器 + pagination: { + el: '.swiper-pagination', + clickable:true + }, + autoplay: { + disableOnInteraction: false, //点击后继续轮播(这个很重要) + delay: 1500, //自动轮播的每次的时间 可以不设置 会有个默认值 + }, + // 如果需要前进后退按钮 + + + }) + } + if (_index == 1){ + new Swiper ('#portfolio-pc', { + direction: 'horizontal', + loop: true, + speed: 500, //设置轮播时长 可以不设置 会有个默认值 + autoplay: true,//可选选项，自动滑动 + // 如果需要分页器 + pagination: { + el: '.swiper-pagination', + clickable:true + }, + autoplay: { + disableOnInteraction: false, //点击后继续轮播(这个很重要) + delay: 1500, //自动轮播的每次的时间 可以不设置 会有个默认值 + }, + // 如果需要前进后退按钮 + + + }) + } + if (_index == 2){ + new Swiper ('#portfolio-analysis', { + direction: 'horizontal', + loop: true, + speed: 500, //设置轮播时长 可以不设置 会有个默认值 + autoplay: true,//可选选项，自动滑动 + // 如果需要分页器 + pagination: { + el: '.swiper-pagination', + clickable:true + }, + autoplay: { + disableOnInteraction: false, //点击后继续轮播(这个很重要) + delay: 1500, //自动轮播的每次的时间 可以不设置 会有个默认值 + }, + // 如果需要前进后退按钮 + + + }) + } + }) //硬件 $('#portfolio-hardware-wrap li').on('click',function () { @@ -17,7 +78,7 @@ $('#portfolio-hardware-wrap li').on('click',function () { -var mySwiper = new Swiper ('#portfolio-rnt', { + new Swiper ('#portfolio-rnt', { direction: 'horizontal', loop: true, speed: 500, //设置轮播时长 可以不设置 会有个默认值 @@ -35,3 +96,5 @@ var mySwiper = new Swiper ('#portfolio-rnt', { }) + + diff --git a/portfolio.html b/portfolio.html index 09b14f0..3fa0d4f 100755 --- a/portfolio.html +++ b/portfolio.html @@ -101,7 +101,7 @@