swiper

liuqimichale
1 parent b9dfb040
Showing 6 changed files with 202 additions and 34 deletions
css/swiper.css
images/parkpoint-blue.png
images/parkpoint-green.png
index.html
js/main.js
style.css
@@ -22,6 +22,7 @@
   width: 1200px;
   height: 100%;
   margin: 0 auto;
+  position: relative;
 }
 .swiper-container-no-flexbox .swiper-slide {
   float: left;
@@ -7,7 +7,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
  
-    <link type="text/css"  rel="icon" href="img/header-logo1.png">
+    <link type="text/css"  rel="icon" href="images/logo.png">
     <!-- Place favicon.ico in the root directory -->
  
     <!-- Google Fonts -->
@@ -118,20 +118,29 @@
  
 <div class="swiper-container">
     <div class="swiper-wrapper">
-        <!--<div class="swiper-slide swiper-slide-1" >-->
-            <!--<div class="swiper-slide-main">-->
-                <!--<div class="swiper-slide-large">物联改变时代 智慧停车 从现在开始</div>-->
-                <!--<div class="swiper-slide-middle">快速、高效、不停车、不拥堵</div>-->
-                <!--<div class="swiper-slide-more">了解更多</div>-->
-            <!--</div>-->
-        <!--</div>-->
-        <!--<div class="swiper-slide swiper-slide-2">-->
-            <!--<div class="swiper-slide-main swiper-slide-main-2">-->
-                <!--<div class="swiper-slide-large">云端saas服务，大并发高可用架构</div>-->
-                <!--<div class="swiper-slide-middle">为您的数字资产保驾护航 数据全方位呵护</div>-->
-                <!--<div class="swiper-slide-more">了解更多</div>-->
-            <!--</div>-->
-        <!--</div>-->
+        <div class="swiper-slide swiper-slide-1" >
+            <div class="swiper-slide-main">
+                <div class="park-point">
+                    <div class="parkpoint1 parkpoint"></div>
+                    <div class="parkpoint2 parkpoint"></div>
+                    <div class="parkpoint3 parkpoint"></div>
+                    <div class="parkpoint4 parkpoint"></div>
+                    <div class="parkpoint5 parkpoint"></div>
+                    <div class="parkpoint6 parkpoint"></div>
+                    <div class="parkpoint7 parkpoint"></div>
+                </div>
+                <div class="swiper-slide-large">物联改变时代 智慧停车 从现在开始</div>
+                <div class="swiper-slide-middle">快速、高效、不停车、不拥堵</div>
+                <div class="swiper-slide-more">了解更多</div>
+            </div>
+        </div>
+        <div class="swiper-slide swiper-slide-2">
+            <div class="swiper-slide-main swiper-slide-main-2">
+                <div class="swiper-slide-large">云端saas服务，大并发高可用架构</div>
+                <div class="swiper-slide-middle">为您的数字资产保驾护航 数据全方位呵护</div>
+                <div class="swiper-slide-more">了解更多</div>
+            </div>
+        </div>
         <div class="swiper-slide swiper-slide-3">
             <div class="swiper-slide-main swiper-slide-main-3">
                 <div class="swiper-slide-large">全方位解决方案 全数据云服务 全时空可视化</div>
@@ -931,6 +940,6 @@
 <script type="text/javascript" src="js/jquery.counterup.min.js"></script>
 <script type="text/javascript" src="js/swiper.js"></script>
 <script type="text/javascript" src="js/gmaps.min.js"></script>
-<script type="text/javascript" src="js/main.js"></script>
+<script type="text/javascript" src="js/main.js?a=1"></script>
 </body>
 </html>
@@ -179,21 +179,21 @@
 			});
 		});
  
-    // var mySwiper = new Swiper ('.swiper-container', {
-    //   direction: 'horizontal',
-    //   loop: true,
-    //   speed: 500, //设置轮播时长 可以不设置 会有个默认值
-    //   autoplay: true,//可选选项，自动滑动
-    //   // // 如果需要分页器
-    //   // pagination: {
-    //   //   el: '.swiper-pagination',
-    //   // },
-    //   autoplay: {
-    //     disableOnInteraction: false,  //点击后继续轮播(这个很重要)
-    //     delay: 1000,                       //自动轮播的每次的时间 可以不设置 会有个默认值
-    //   },
-    //   // 如果需要前进后退按钮
-		//
-		//
-    // })
+    var mySwiper = new Swiper ('.swiper-container', {
+      direction: 'horizontal',
+      loop: true,
+      speed: 500, //设置轮播时长 可以不设置 会有个默认值
+      autoplay: true,//可选选项，自动滑动
+      // 如果需要分页器
+      pagination: {
+        el: '.swiper-pagination',
+      },
+      autoplay: {
+        disableOnInteraction: false,  //点击后继续轮播(这个很重要)
+        delay: 1000,                       //自动轮播的每次的时间 可以不设置 会有个默认值
+      },
+      // 如果需要前进后退按钮
+
+
+    })
  
@@ -392,7 +392,165 @@ a:hover{
 	width: 100%;
 	height: 600px;
 }
-
+.parkpoint{
+	position: absolute;
+	width: 25px;
+	height: 39px;
+}
+@keyframes breath{
+	from{opacity:0.1}
+	50%{opacity:1}
+	to{opacity:0.1}
+}
+@-moz-keyframes breath{
+	from{opacity:0.1}
+	50%{opacity:1}
+	to{opacity:0.1}
+}
+@-webkit-keyframes breath{
+	from{opacity:0.1}
+	50%{opacity:1}
+	to{opacity:0.1}
+}
+.parkpoint1,.parkpoint2,.parkpoint3{
+	background: url("images/parkpoint-green.png") no-repeat;
+}
+.parkpoint4,.parkpoint5,.parkpoint6,.parkpoint7{
+	background: url("images/parkpoint-blue.png") no-repeat;
+}
+.parkpoint1{
+	left: 100px;
+	top:428px;
+	animation-name: breath;
+	animation-duration: 3s;
+	animation-delay:0.1s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	-webkit-animation-name: breath;
+	-webkit-animation-duration: 3s;
+	-webkit-animation-delay:0.1s;
+	-webkit-animation-timing-function: ease-in-out;
+	-webkit-animation-iteration-count: infinite;
+	-moz-animation-name: breath;
+	-moz-animation-duration: 3s;
+	-moz-animation-delay:0.1s;
+	-moz-animation-timing-function: ease-in-out;
+	-moz-animation-iteration-count: infinite;
+}
+.parkpoint2{
+	left: 500px;
+	top:341px;
+	animation-name: breath;
+	animation-duration: 3s;
+	animation-delay:0.2s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	-webkit-animation-name: breath;
+	-webkit-animation-duration: 3s;
+	-webkit-animation-delay:0.2s;
+	-webkit-animation-timing-function: ease-in-out;
+	-webkit-animation-iteration-count: infinite;
+	-moz-animation-name: breath;
+	-moz-animation-duration: 3s;
+	-moz-animation-delay:0.2s;
+	-moz-animation-timing-function: ease-in-out;
+	-moz-animation-iteration-count: infinite;
+}
+.parkpoint3{
+	left: 700px;
+	top:97px;
+	animation-name: breath;
+	animation-duration: 3s;
+	animation-delay:0.3s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	-webkit-animation-name: breath;
+	-webkit-animation-duration: 3s;
+	-webkit-animation-delay:0.3s;
+	-webkit-animation-timing-function: ease-in-out;
+	-webkit-animation-iteration-count: infinite;
+	-moz-animation-name: breath;
+	-moz-animation-duration: 3s;
+	-moz-animation-delay:0.3s;
+	-moz-animation-timing-function: ease-in-out;
+	-moz-animation-iteration-count: infinite;
+}
+.parkpoint4{
+	left: 700px;
+	top:371px;
+	animation-name: breath;
+	animation-duration: 3s;
+	animation-delay:0.4s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	-webkit-animation-name: breath;
+	-webkit-animation-duration: 3s;
+	-webkit-animation-delay:0.4s;
+	-webkit-animation-timing-function: ease-in-out;
+	-webkit-animation-iteration-count: infinite;
+	-moz-animation-name: breath;
+	-moz-animation-duration: 3s;
+	-moz-animation-delay:0.4s;
+	-moz-animation-timing-function: ease-in-out;
+	-moz-animation-iteration-count: infinite;
+}
+.parkpoint5{
+	left: 800px;
+	top:442px;
+	animation-name: breath;
+	animation-duration: 3s;
+	animation-delay:0.5s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	-webkit-animation-name: breath;
+	-webkit-animation-duration: 3s;
+	-webkit-animation-delay:0.5s;
+	-webkit-animation-timing-function: ease-in-out;
+	-webkit-animation-iteration-count: infinite;
+	-moz-animation-name: breath;
+	-moz-animation-duration: 3s;
+	-moz-animation-delay:0.5s;
+	-moz-animation-timing-function: ease-in-out;
+	-moz-animation-iteration-count: infinite;
+}
+.parkpoint6{
+	left: 850px;
+	top:230px;
+	animation-name: breath;
+	animation-duration: 3s;
+	animation-delay:0.6s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	-webkit-animation-name: breath;
+	-webkit-animation-duration: 3s;
+	-webkit-animation-delay:0.6s;
+	-webkit-animation-timing-function: ease-in-out;
+	-webkit-animation-iteration-count: infinite;
+	-moz-animation-name: breath;
+	-moz-animation-duration: 3s;
+	-moz-animation-delay:0.6s;
+	-moz-animation-timing-function: ease-in-out;
+	-moz-animation-iteration-count: infinite;
+}
+.parkpoint7{
+	left: 950px;
+	top:274px;
+	animation-name: breath;
+	animation-duration: 3s;
+	animation-delay:0.7s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	-webkit-animation-name: breath;
+	-webkit-animation-duration: 3s;
+	-webkit-animation-delay:0.7s;
+	-webkit-animation-timing-function: ease-in-out;
+	-webkit-animation-iteration-count: infinite;
+	-moz-animation-name: breath;
+	-moz-animation-duration: 3s;
+	-moz-animation-delay:0.7s;
+	-moz-animation-timing-function: ease-in-out;
+	-moz-animation-iteration-count: infinite;
+}
 /*===================
 	End swiper CSS
 =====================*/