产品介绍 Swiper

liuqimichale
1 parent 637a0876
Showing 12 changed files with 195 additions and 16 deletions
css/portfollo.css
images/portfolio-analysis1.png
images/portfolio-analysis2.png
images/portfolio-analysis3.png
images/portfolio-analysis4.png
images/portfolio-pc.png
images/portfolio-pc1.png
images/portfolio-pc2.png
images/portfolio-pc3.png
images/portfolio-pc4.png
js/portfollo.js
portfolio.html
@@ -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;
 }
@@ -5,6 +5,67 @@ $(&#39;#portfolio-soft-wrap li&#39;).on(&#39;click&#39;,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 @@ $(&#39;#portfolio-hardware-wrap li&#39;).on(&#39;click&#39;,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 (&#39;#portfolio-rnt&#39;, {
 })
+
+
@@ -101,7 +101,7 @@
         <section class="padding20-0-70">
             <div class="container">
                 <ul class="row ortfolio-soft-bottom-1">
-                    <div  id="portfolio-rnt-wrap">
+                    <div  class="portfolio-rnt-wrap">
                         <li class="text-center col-md-6 swiper-container" id="portfolio-rnt">
                                 <div class="swiper-wrapper">
                                     <div class="swiper-slide portfolio-rnt1">
@@ -143,9 +143,24 @@
         <section class="padding20-0-70">
             <div class="container">
                 <ul class="row ortfolio-soft-bottom-2">
-                    <li class="text-center col-md-6">
+                    <div  class="portfolio-pc-wrap">
+                        <li class="text-center col-md-6 swiper-container" id="portfolio-pc">
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide portfolio-pc1">
-                    </li>
+                                </div>
+                                <div class="swiper-slide portfolio-pc2">
+
+                                </div>
+                                <div class="swiper-slide portfolio-pc3">
+
+                                </div>
+                                <div class="swiper-slide portfolio-pc4">
+
+                                </div>
+                            </div>
+                        </li>
+                    </div>
                     <li class="text-center col-md-6">
                         <div class="ortfolio-soft-bottom-title">
                             <span></span>企业云平台
@@ -170,9 +185,24 @@
         <section class="padding20-0-70">
             <div class="container">
                 <ul class="row ortfolio-soft-bottom-3">
-                    <li class="text-center col-md-6">
+                    <div  class="portfolio-analysis-wrap">
+                        <li class="text-center col-md-6 swiper-container" id="portfolio-analysis">
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide portfolio-analysis1">
-                    </li>
+                                </div>
+                                <div class="swiper-slide portfolio-analysis2">
+
+                                </div>
+                                <div class="swiper-slide portfolio-analysis3">
+
+                                </div>
+                                <div class="swiper-slide portfolio-analysis4">
+
+                                </div>
+                            </div>
+                        </li>
+                    </div>
                     <li class="text-center col-md-6">
                         <div class="ortfolio-soft-bottom-title">
                             <span></span>数据分析平台
@@ -366,6 +396,6 @@
 <script type="text/javascript" src="js/gmaps.min.js"></script>
 <script type="text/javascript" src="js/nav-footer.js"></script>
 <script src="js/main.js?a=2"></script>
-<script src="js/portfollo.js?a=5"></script>
+<script src="js/portfollo.js?a=1"></script>
 </body>
 </html>