Skip to content

Commit 84d4281

Browse files
zjkyz8zjkyz8
committed
添加banner
1 parent 7cd0ada commit 84d4281

12 files changed

+324
-1
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎images/banner-2.png

1.21 MB
Loading

‎index.html

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
88
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
99
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
10+
<link rel="stylesheet" href="js/assets/owl.theme.default.css" />
1011
<script type="text/javascript" src="js/bundle.js"></script>
12+
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
13+
<link rel="stylesheet" href="js/assets/owl.carousel.min.css" />
1114
<script>
1215
var _hmt = _hmt || [];
1316
(function() {
@@ -35,8 +38,12 @@
3538
</div>
3639
</div>
3740
</div>
38-
<div class="banner">
41+
<!-- <div class="banner">
3942
<img src="images/banner-1.png" style="width:100%;height:auto;">
43+
</div> -->
44+
<div class="owl-carousel owl-theme">
45+
<img src="images/banner-1.png" style="width:100%;height:auto;">
46+
<img src="images/banner-2.png" style="width:100%;height:auto;">
4047
</div>
4148
<div class="container">
4249
<div class="row">
@@ -153,6 +160,17 @@ <h2 class="project-name">
153160
<p class="liscens">© 2012-2017 Didi Chuxing. All Rights Reserved</p>
154161
</div>
155162
</div>
163+
<script type="text/javascript">
164+
$(document).ready(function() {
165+
$(".owl-carousel").owlCarousel({
166+
nav: false,
167+
autoplay: true,
168+
items: 1,
169+
dots: false,
170+
171+
});
172+
});
173+
</script>
156174
</body>
157175

158176
</html>

‎js/assets/ajax-loader.gif

3.13 KB
Loading

‎js/assets/owl.carousel.css

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
/**
2+
* Owl Carousel v2.3.3
3+
* Copyright 2013-2018 David Deutsch
4+
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
5+
*/
6+
/*
7+
* Owl Carousel - Core
8+
*/
9+
.owl-carousel {
10+
display: none;
11+
width: 100%;
12+
-webkit-tap-highlight-color: transparent;
13+
/* position relative and z-index fix webkit rendering fonts issue */
14+
position: relative;
15+
z-index: 1; }
16+
.owl-carousel .owl-stage {
17+
position: relative;
18+
-ms-touch-action: pan-Y;
19+
touch-action: manipulation;
20+
-moz-backface-visibility: hidden;
21+
/* fix firefox animation glitch */ }
22+
.owl-carousel .owl-stage:after {
23+
content: ".";
24+
display: block;
25+
clear: both;
26+
visibility: hidden;
27+
line-height: 0;
28+
height: 0; }
29+
.owl-carousel .owl-stage-outer {
30+
position: relative;
31+
overflow: hidden;
32+
/* fix for flashing background */
33+
-webkit-transform: translate3d(0px, 0px, 0px); }
34+
.owl-carousel .owl-wrapper,
35+
.owl-carousel .owl-item {
36+
-webkit-backface-visibility: hidden;
37+
-moz-backface-visibility: hidden;
38+
-ms-backface-visibility: hidden;
39+
-webkit-transform: translate3d(0, 0, 0);
40+
-moz-transform: translate3d(0, 0, 0);
41+
-ms-transform: translate3d(0, 0, 0); }
42+
.owl-carousel .owl-item {
43+
position: relative;
44+
min-height: 1px;
45+
float: left;
46+
-webkit-backface-visibility: hidden;
47+
-webkit-tap-highlight-color: transparent;
48+
-webkit-touch-callout: none; }
49+
.owl-carousel .owl-item img {
50+
display: block;
51+
width: 100%; }
52+
.owl-carousel .owl-nav.disabled,
53+
.owl-carousel .owl-dots.disabled {
54+
display: none; }
55+
.owl-carousel .owl-nav .owl-prev,
56+
.owl-carousel .owl-nav .owl-next,
57+
.owl-carousel .owl-dot {
58+
cursor: pointer;
59+
-webkit-user-select: none;
60+
-khtml-user-select: none;
61+
-moz-user-select: none;
62+
-ms-user-select: none;
63+
user-select: none; }
64+
.owl-carousel .owl-nav button.owl-prev,
65+
.owl-carousel .owl-nav button.owl-next,
66+
.owl-carousel button.owl-dot {
67+
background: none;
68+
color: inherit;
69+
border: none;
70+
padding: 0 !important;
71+
font: inherit; }
72+
.owl-carousel.owl-loaded {
73+
display: block; }
74+
.owl-carousel.owl-loading {
75+
opacity: 0;
76+
display: block; }
77+
.owl-carousel.owl-hidden {
78+
opacity: 0; }
79+
.owl-carousel.owl-refresh .owl-item {
80+
visibility: hidden; }
81+
.owl-carousel.owl-drag .owl-item {
82+
-ms-touch-action: none;
83+
touch-action: none;
84+
-webkit-user-select: none;
85+
-moz-user-select: none;
86+
-ms-user-select: none;
87+
user-select: none; }
88+
.owl-carousel.owl-grab {
89+
cursor: move;
90+
cursor: grab; }
91+
.owl-carousel.owl-rtl {
92+
direction: rtl; }
93+
.owl-carousel.owl-rtl .owl-item {
94+
float: right; }
95+
96+
/* No Js */
97+
.no-js .owl-carousel {
98+
display: block; }
99+
100+
/*
101+
* Owl Carousel - Animate Plugin
102+
*/
103+
.owl-carousel .animated {
104+
animation-duration: 1000ms;
105+
animation-fill-mode: both; }
106+
107+
.owl-carousel .owl-animated-in {
108+
z-index: 0; }
109+
110+
.owl-carousel .owl-animated-out {
111+
z-index: 1; }
112+
113+
.owl-carousel .fadeOut {
114+
animation-name: fadeOut; }
115+
116+
@keyframes fadeOut {
117+
0% {
118+
opacity: 1; }
119+
100% {
120+
opacity: 0; } }
121+
122+
/*
123+
* Owl Carousel - Auto Height Plugin
124+
*/
125+
.owl-height {
126+
transition: height 500ms ease-in-out; }
127+
128+
/*
129+
* Owl Carousel - Lazy Load Plugin
130+
*/
131+
.owl-carousel .owl-item .owl-lazy {
132+
opacity: 0;
133+
transition: opacity 400ms ease; }
134+
135+
.owl-carousel .owl-item img.owl-lazy {
136+
transform-style: preserve-3d; }
137+
138+
/*
139+
* Owl Carousel - Video Plugin
140+
*/
141+
.owl-carousel .owl-video-wrapper {
142+
position: relative;
143+
height: 100%;
144+
background: #000; }
145+
146+
.owl-carousel .owl-video-play-icon {
147+
position: absolute;
148+
height: 80px;
149+
width: 80px;
150+
left: 50%;
151+
top: 50%;
152+
margin-left: -40px;
153+
margin-top: -40px;
154+
background: url("owl.video.play.png") no-repeat;
155+
cursor: pointer;
156+
z-index: 1;
157+
-webkit-backface-visibility: hidden;
158+
transition: transform 100ms ease; }
159+
160+
.owl-carousel .owl-video-play-icon:hover {
161+
-ms-transform: scale(1.3, 1.3);
162+
transform: scale(1.3, 1.3); }
163+
164+
.owl-carousel .owl-video-playing .owl-video-tn,
165+
.owl-carousel .owl-video-playing .owl-video-play-icon {
166+
display: none; }
167+
168+
.owl-carousel .owl-video-tn {
169+
opacity: 0;
170+
height: 100%;
171+
background-position: center center;
172+
background-repeat: no-repeat;
173+
background-size: contain;
174+
transition: opacity 400ms ease; }
175+
176+
.owl-carousel .owl-video-frame {
177+
position: relative;
178+
z-index: 1;
179+
height: 100%;
180+
width: 100%; }

‎js/assets/owl.carousel.min.css

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/assets/owl.theme.default.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Owl Carousel v2.3.3
3+
* Copyright 2013-2018 David Deutsch
4+
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
5+
*/
6+
/*
7+
* Default theme - Owl Carousel CSS File
8+
*/
9+
.owl-theme .owl-nav {
10+
margin-top: 10px;
11+
text-align: center;
12+
-webkit-tap-highlight-color: transparent; }
13+
.owl-theme .owl-nav [class*='owl-'] {
14+
color: #FFF;
15+
font-size: 14px;
16+
margin: 5px;
17+
padding: 4px 7px;
18+
background: #D6D6D6;
19+
display: inline-block;
20+
cursor: pointer;
21+
border-radius: 3px; }
22+
.owl-theme .owl-nav [class*='owl-']:hover {
23+
background: #869791;
24+
color: #FFF;
25+
text-decoration: none; }
26+
.owl-theme .owl-nav .disabled {
27+
opacity: 0.5;
28+
cursor: default; }
29+
30+
.owl-theme .owl-nav.disabled + .owl-dots {
31+
margin-top: 10px; }
32+
33+
.owl-theme .owl-dots {
34+
text-align: center;
35+
-webkit-tap-highlight-color: transparent; }
36+
.owl-theme .owl-dots .owl-dot {
37+
display: inline-block;
38+
zoom: 1;
39+
*display: inline; }
40+
.owl-theme .owl-dots .owl-dot span {
41+
width: 10px;
42+
height: 10px;
43+
margin: 5px 7px;
44+
background: #D6D6D6;
45+
display: block;
46+
-webkit-backface-visibility: visible;
47+
transition: opacity 200ms ease;
48+
border-radius: 30px; }
49+
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
50+
background: #869791; }

‎js/assets/owl.theme.default.min.css

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/assets/owl.theme.green.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Owl Carousel v2.3.3
3+
* Copyright 2013-2018 David Deutsch
4+
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
5+
*/
6+
/*
7+
* Green theme - Owl Carousel CSS File
8+
*/
9+
.owl-theme .owl-nav {
10+
margin-top: 10px;
11+
text-align: center;
12+
-webkit-tap-highlight-color: transparent; }
13+
.owl-theme .owl-nav [class*='owl-'] {
14+
color: #FFF;
15+
font-size: 14px;
16+
margin: 5px;
17+
padding: 4px 7px;
18+
background: #D6D6D6;
19+
display: inline-block;
20+
cursor: pointer;
21+
border-radius: 3px; }
22+
.owl-theme .owl-nav [class*='owl-']:hover {
23+
background: #4DC7A0;
24+
color: #FFF;
25+
text-decoration: none; }
26+
.owl-theme .owl-nav .disabled {
27+
opacity: 0.5;
28+
cursor: default; }
29+
30+
.owl-theme .owl-nav.disabled + .owl-dots {
31+
margin-top: 10px; }
32+
33+
.owl-theme .owl-dots {
34+
text-align: center;
35+
-webkit-tap-highlight-color: transparent; }
36+
.owl-theme .owl-dots .owl-dot {
37+
display: inline-block;
38+
zoom: 1;
39+
*display: inline; }
40+
.owl-theme .owl-dots .owl-dot span {
41+
width: 10px;
42+
height: 10px;
43+
margin: 5px 7px;
44+
background: #D6D6D6;
45+
display: block;
46+
-webkit-backface-visibility: visible;
47+
transition: opacity 200ms ease;
48+
border-radius: 30px; }
49+
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
50+
background: #4DC7A0; }

‎js/assets/owl.theme.green.min.css

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/assets/owl.video.play.png

4.86 KB
Loading

‎js/owl.carousel.min.js

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)