BJ_web_developers / webportal

Commit 4c61ea2c8f8aa28be52ce3392296ae6ad8fc34b2

Authored by liuqimichale
1 parent 637a0876

产品介绍 Swiper

Inline Side-by-side
Showing 12 changed files with 195 additions and 16 deletions
css/portfollo.css
  View file @4c61ea2
... ... @@ -70,22 +70,56 @@
70 70 width: 50%;
71 71 padding-left: 100px;
72 72 }
  73 +.ortfolio-soft-bottom-2>li:nth-of-type(1){
  74 + padding-left: 100px;
  75 +}
  76 +.ortfolio-soft-bottom-3>li:nth-of-type(1){
  77 + padding-left: 100px;
  78 +}
73 79 .ortfolio-soft-bottom-1>li:nth-of-type(1) .swiper-slide{
74 80 height: 500px;
75 81 }
76   -#portfolio-rnt-wrap{
  82 +.portfolio-rnt-wrap{
77 83 width: 50%;
78 84 height: 500px;
79 85 float: left;
80 86 background: url("../images/portfolio-rnt.png") no-repeat -35px 0;
81 87 overflow: hidden;
82 88 }
  89 +.portfolio-pc-wrap{
  90 + width: 50%;
  91 + height: 500px;
  92 + float: left;
  93 + background: url("../images/portfolio-pc.png") no-repeat center center;
  94 + background-size: 100% 70%;
  95 + overflow: hidden;
  96 +}
  97 + .portfolio-analysis-wrap{
  98 + width: 50%;
  99 + height: 500px;
  100 + float: left;
  101 + background: url("../images/portfolio-pc.png") no-repeat center center;
  102 + background-size: 100% 70%;
  103 + overflow: hidden;
  104 + }
83 105 #portfolio-rnt{
84 106 width: 300px;
85 107 height: 500px;
86 108 margin-left: 215px;
87 109 margin-top: 23px;
88 110 }
  111 +#portfolio-pc{
  112 + width: 473px;
  113 + height: 300px;
  114 + margin-left: 63px;
  115 + margin-top: 93px;
  116 +}
  117 +#portfolio-analysis{
  118 + width: 473px;
  119 + height: 300px;
  120 + margin-left: 63px;
  121 + margin-top: 93px;
  122 +}
89 123 #portfolio-rnt .portfolio-rnt1{
90 124 width:100%;
91 125 height: 500px;
... ... @@ -106,20 +140,72 @@
106 140 height: 500px;
107 141 background: url("../images/portfolio-rnt4.png") no-repeat ;
108 142 }
  143 +
  144 +#portfolio-pc .portfolio-pc1{
  145 + width:100%;
  146 + height: 300px;
  147 + background: url("../images/portfolio-pc1.png") no-repeat ;
  148 + background-size: 100% 100%;
  149 +}
  150 +
  151 +#portfolio-pc .portfolio-pc2{
  152 + width:100%;
  153 + height: 300px;
  154 + background: url("../images/portfolio-pc2.png") no-repeat ;
  155 + background-size: 100% 100%;
  156 +}
  157 +
  158 +#portfolio-pc .portfolio-pc3{
  159 + width:100%;
  160 + height: 300px;
  161 + background: url("../images/portfolio-pc3.png") no-repeat ;
  162 + background-size: 100% 100%;
  163 +}
  164 +
  165 +#portfolio-pc .portfolio-pc4{
  166 + width:100%;
  167 + height: 300px;
  168 + background: url("../images/portfolio-pc4.png") no-repeat ;
  169 + background-size: 100% 100%;
  170 +}
  171 +#portfolio-analysis .portfolio-analysis1{
  172 + width:100%;
  173 + height: 300px;
  174 + background: url("../images/portfolio-analysis1.png") no-repeat ;
  175 + background-size: 100% 100%;
  176 +}
  177 +#portfolio-analysis .portfolio-analysis2{
  178 + width:100%;
  179 + height: 300px;
  180 + background: url("../images/portfolio-analysis2.png") no-repeat ;
  181 + background-size: 100% 100%;
  182 +}
  183 +#portfolio-analysis .portfolio-analysis3{
  184 + width:100%;
  185 + height: 300px;
  186 + background: url("../images/portfolio-analysis3.png") no-repeat ;
  187 + background-size: 100% 100%;
  188 +}
  189 +#portfolio-analysis .portfolio-analysis4{
  190 + width:100%;
  191 + height: 300px;
  192 + background: url("../images/portfolio-analysis4.png") no-repeat ;
  193 + background-size: 100% 100%;
  194 +}
109 195 .ortfolio-soft-bottom-1 li:nth-of-type(2){
110 196 padding-left: 100px;
111 197 }
112   -.ortfolio-soft-bottom-2 li:nth-of-type(1){
113   - background: url("../images/ortfolio-soft-pc1.gif") no-repeat center center;
114   - background-size: 100% 80%;
115   -}
  198 +/*.ortfolio-soft-bottom-2 li:nth-of-type(1){*/
  199 + /*background: url("../images/ortfolio-soft-pc1.gif") no-repeat center center;*/
  200 + /*background-size: 100% 80%;*/
  201 +/*}*/
116 202 .ortfolio-soft-bottom-2 li:nth-of-type(2){
117 203 padding-left:100px;
118 204 }
119   -.ortfolio-soft-bottom-3 li:nth-of-type(1){
120   - background: url("../images/ortfolio-soft-pc2.gif") no-repeat center center;
121   - background-size: 100% 80%;
122   -}
  205 +/*.ortfolio-soft-bottom-3 li:nth-of-type(1){*/
  206 + /*background: url("../images/ortfolio-soft-pc2.gif") no-repeat center center;*/
  207 + /*background-size: 100% 80%;*/
  208 +/*}*/
123 209 .ortfolio-soft-bottom-3 li:nth-of-type(2){
124 210 padding-left:100px;
125 211 }
... ...
images/portfolio-analysis1.png 0 → 100644
View file @4c61ea2

300 KB
images/portfolio-analysis2.png 0 → 100644
View file @4c61ea2

303 KB
images/portfolio-analysis3.png 0 → 100644
View file @4c61ea2

277 KB
images/portfolio-analysis4.png 0 → 100644
View file @4c61ea2

281 KB
images/portfolio-pc.png 0 → 100644
View file @4c61ea2

37.2 KB
images/portfolio-pc1.png 0 → 100644
View file @4c61ea2

112 KB
images/portfolio-pc2.png 0 → 100644
View file @4c61ea2

67.6 KB
images/portfolio-pc3.png 0 → 100644
View file @4c61ea2

85.7 KB
images/portfolio-pc4.png 0 → 100644
View file @4c61ea2

86.2 KB
js/portfollo.js
  View file @4c61ea2
... ... @@ -5,6 +5,67 @@ $('#portfolio-soft-wrap li').on('click',function () {
5 5 $('#portfolio-soft-wrap li').children('div').addClass('displaynone');
6 6 $('#portfolio-soft-wrap li').eq(_index).children('div').removeClass('displaynone');
7 7 $('#portfolio-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone');
  8 + if (_index == 0){
  9 + new Swiper ('#portfolio-rnt', {
  10 + direction: 'horizontal',
  11 + loop: true,
  12 + speed: 500, //设置轮播时长 可以不设置 会有个默认值
  13 + autoplay: true,//可选选项，自动滑动
  14 + // 如果需要分页器
  15 + pagination: {
  16 + el: '.swiper-pagination',
  17 + clickable:true
  18 + },
  19 + autoplay: {
  20 + disableOnInteraction: false, //点击后继续轮播(这个很重要)
  21 + delay: 1500, //自动轮播的每次的时间 可以不设置 会有个默认值
  22 + },
  23 + // 如果需要前进后退按钮
  24 +
  25 +
  26 + })
  27 + }
  28 + if (_index == 1){
  29 + new Swiper ('#portfolio-pc', {
  30 + direction: 'horizontal',
  31 + loop: true,
  32 + speed: 500, //设置轮播时长 可以不设置 会有个默认值
  33 + autoplay: true,//可选选项，自动滑动
  34 + // 如果需要分页器
  35 + pagination: {
  36 + el: '.swiper-pagination',
  37 + clickable:true
  38 + },
  39 + autoplay: {
  40 + disableOnInteraction: false, //点击后继续轮播(这个很重要)
  41 + delay: 1500, //自动轮播的每次的时间 可以不设置 会有个默认值
  42 + },
  43 + // 如果需要前进后退按钮
  44 +
  45 +
  46 + })
  47 + }
  48 + if (_index == 2){
  49 + new Swiper ('#portfolio-analysis', {
  50 + direction: 'horizontal',
  51 + loop: true,
  52 + speed: 500, //设置轮播时长 可以不设置 会有个默认值
  53 + autoplay: true,//可选选项，自动滑动
  54 + // 如果需要分页器
  55 + pagination: {
  56 + el: '.swiper-pagination',
  57 + clickable:true
  58 + },
  59 + autoplay: {
  60 + disableOnInteraction: false, //点击后继续轮播(这个很重要)
  61 + delay: 1500, //自动轮播的每次的时间 可以不设置 会有个默认值
  62 + },
  63 + // 如果需要前进后退按钮
  64 +
  65 +
  66 + })
  67 + }
  68 +
8 69 })
9 70 //硬件
10 71 $('#portfolio-hardware-wrap li').on('click',function () {
... ... @@ -17,7 +78,7 @@ $('#portfolio-hardware-wrap li').on('click',function () {
17 78  
18 79  
19 80  
20   -var mySwiper = new Swiper ('#portfolio-rnt', {
  81 + new Swiper ('#portfolio-rnt', {
21 82 direction: 'horizontal',
22 83 loop: true,
23 84 speed: 500, //设置轮播时长 可以不设置 会有个默认值
... ... @@ -35,3 +96,5 @@ var mySwiper = new Swiper ('#portfolio-rnt', {
35 96  
36 97  
37 98 })
  99 +
  100 +
... ...
portfolio.html
  View file @4c61ea2
... ... @@ -101,7 +101,7 @@
101 101 <section class="padding20-0-70">
102 102 <div class="container">
103 103 <ul class="row ortfolio-soft-bottom-1">
104   - <div id="portfolio-rnt-wrap">
  104 + <div class="portfolio-rnt-wrap">
105 105 <li class="text-center col-md-6 swiper-container" id="portfolio-rnt">
106 106 <div class="swiper-wrapper">
107 107 <div class="swiper-slide portfolio-rnt1">
... ... @@ -143,9 +143,24 @@
143 143 <section class="padding20-0-70">
144 144 <div class="container">
145 145 <ul class="row ortfolio-soft-bottom-2">
146   - <li class="text-center col-md-6">
  146 + <div class="portfolio-pc-wrap">
  147 + <li class="text-center col-md-6 swiper-container" id="portfolio-pc">
  148 + <div class="swiper-wrapper">
  149 + <div class="swiper-slide portfolio-pc1">
147 150  
148   - </li>
  151 + </div>
  152 + <div class="swiper-slide portfolio-pc2">
  153 +
  154 + </div>
  155 + <div class="swiper-slide portfolio-pc3">
  156 +
  157 + </div>
  158 + <div class="swiper-slide portfolio-pc4">
  159 +
  160 + </div>
  161 + </div>
  162 + </li>
  163 + </div>
149 164 <li class="text-center col-md-6">
150 165 <div class="ortfolio-soft-bottom-title">
151 166 <span></span>企业云平台
... ... @@ -170,9 +185,24 @@
170 185 <section class="padding20-0-70">
171 186 <div class="container">
172 187 <ul class="row ortfolio-soft-bottom-3">
173   - <li class="text-center col-md-6">
  188 + <div class="portfolio-analysis-wrap">
  189 + <li class="text-center col-md-6 swiper-container" id="portfolio-analysis">
  190 + <div class="swiper-wrapper">
  191 + <div class="swiper-slide portfolio-analysis1">
174 192  
175   - </li>
  193 + </div>
  194 + <div class="swiper-slide portfolio-analysis2">
  195 +
  196 + </div>
  197 + <div class="swiper-slide portfolio-analysis3">
  198 +
  199 + </div>
  200 + <div class="swiper-slide portfolio-analysis4">
  201 +
  202 + </div>
  203 + </div>
  204 + </li>
  205 + </div>
176 206 <li class="text-center col-md-6">
177 207 <div class="ortfolio-soft-bottom-title">
178 208 <span></span>数据分析平台
... ... @@ -366,6 +396,6 @@
366 396 <script type="text/javascript" src="js/gmaps.min.js"></script>
367 397 <script type="text/javascript" src="js/nav-footer.js"></script>
368 398 <script src="js/main.js?a=2"></script>
369   -<script src="js/portfollo.js?a=5"></script>
  399 +<script src="js/portfollo.js?a=1"></script>
370 400 </body>
371 401 </html>
... ...