From 14d5eaa8548f5bf6280d6ffea454ad7c3114226f Mon Sep 17 00:00:00 2001 From: liuqimichale <123456lq> Date: Thu, 20 Sep 2018 17:02:09 +0800 Subject: [PATCH] swiper --- css/swiper.css | 1 + images/parkpoint-blue.png | Bin 0 -> 1147 bytes images/parkpoint-green.png | Bin 0 -> 1167 bytes index.html | 41 +++++++++++++++++++++++++---------------- js/main.js | 34 +++++++++++++++++----------------- style.css | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 6 files changed, 202 insertions(+), 34 deletions(-) create mode 100755 images/parkpoint-blue.png create mode 100755 images/parkpoint-green.png diff --git a/css/swiper.css b/css/swiper.css index 1459881..473d3be 100755 --- a/css/swiper.css +++ b/css/swiper.css @@ -22,6 +22,7 @@ width: 1200px; height: 100%; margin: 0 auto; + position: relative; } .swiper-container-no-flexbox .swiper-slide { float: left; diff --git a/images/parkpoint-blue.png b/images/parkpoint-blue.png new file mode 100755 index 0000000..3bd22e0 Binary files /dev/null and b/images/parkpoint-blue.png differ diff --git a/images/parkpoint-green.png b/images/parkpoint-green.png new file mode 100755 index 0000000..2a27aee Binary files /dev/null and b/images/parkpoint-green.png differ diff --git a/index.html b/index.html index 865cdc6..fcd3f7b 100755 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - + @@ -118,20 +118,29 @@
- - - - - - - - - - - - - - +
+
+
+
+
+
+
+
+
+
+
+
物联改变时代 智慧停车 从现在开始
+
快速、高效、不停车、不拥堵
+
了解更多
+
+
+
+
+
云端saas服务，大并发高可用架构
+
为您的数字资产保驾护航 数据全方位呵护
+
了解更多
+
+
全方位解决方案 全数据云服务 全时空可视化
@@ -931,6 +940,6 @@ - + diff --git a/js/main.js b/js/main.js index 0981e59..1766564 100755 --- a/js/main.js +++ b/js/main.js @@ -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, //自动轮播的每次的时间 可以不设置 会有个默认值 + }, + // 如果需要前进后退按钮 + + + }) diff --git a/style.css b/style.css index d91b146..dab30a7 100755 --- a/style.css +++ b/style.css @@ -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 =====================*/ -- libgit2 0.21.4