html css js 制作网页banner滑块显示-代码设计网页前端设计cid1052

1. body,
2. html,
3. .seq {
5. /* #1 */
6. width: 100%;
7. height: 100%;
9. /* #2 */
10. margin: 0;
11. padding: 0;
12. }
14. .seq {
16. /* #1 */
17. position: relative;
18. overflow: hidden;
19. font-family: sans-serif;
20. color: white;
21. text-align: center;
22. background-color: #2A93BC;
23. transition-duration: .5s;
24. transition-property: background-color;
25. }
27. .seq-canvas,
28. .seq-canvas > * {
30. /* #1 */
31. height: 100%;
32. width: 100%;
34. /* #2 */
35. margin: 0;
36. padding: 0;
37. list-style: none;
38. }
41. .seq-canvas > * {
42. /* #1 */
43. position: absolute;
45. /* #2 */
46. padding: 32px;
47. box-sizing: border-box;
49. /* #3 */
50. height: auto;
51. top: 0;
52. bottom: 80px;
53. }
55. .seq-step1 {
56. background-color: #102334;
57. }
59. .seq-step2 {
60. background-color:#1f1f1f;
61. }
63. .seq-step3 {
64. background-color: #561295;
65. }
67. .feature {
68. width: 70%;
69. max-width: 100%;
70. height: auto;
71. }
73. @media only screen and (min-width: 460px) and (min-height: 520px) {
74. .feature {
75. width: 100%;
76. }
77. }
80. /* Ghost element */
81. .valign:before {
82. content: "";
83. height: 100%;
84. }
86. /* Vertically align the ghost and desired elements */
87. .valign:before,
88. .valign > .vcenter {
89. display: inline-block;
90. vertical-align: middle;
91. }
93. /* Remove 4px gap to allow consistent valign */
94. .valign {
95. font-size: 0;
96. }
98. /* Reset font-size on valigned elements */
99. .valign > .vcenter {
100. font-size: 16px;
101. }
103. .title {
104. /* #1 */
105. margin: 0;
107. /* #2 */
108. opacity: 0;
109. transform: translateX(50px) translateZ(0);
111. /* #3 */
112. transition-duration: .5s;
113. transition-property: opacity, transform;
114. }
116. /*
117. * When a step is active, fade in to opaque and slide to the center
118. */
119. .seq-in .title {
120. opacity: 1;
121. transform: translateX(0) translateZ(0);
122. }
124. .seq-out .title {
125. opacity: 0;
126. transform: translateX(-50px) translateZ(0);
127. }
130. .feature {
131. transform: translateZ(0) scale(0);
132. transition-duration: .5s;
133. transition-property: transform, opacity;
134. }
137. .seq-in .feature {
138. transform: translateZ(0) scale(1);
139. }
141. .seq-out .feature {
142. transform: translateZ(0) scale(1);
143. opacity: 0;
144. }
146. .nav {
147. /* #1 */
148. position: absolute;
149. z-index: 100;
150. left: 0;
151. right: 0;
152. bottom: 2.5em;
153. max-width: 640px;
154. width: 100%;
156. border: none;
157. margin: 0 auto;
158. padding: 0;
159. }
162. .seq-next,
163. .seq-prev {
164. /* #1 */
165. padding: 0;
166. background: transparent;
167. border: none;
169. /* #2 */
170. padding: .75em;
171. cursor: pointer;
172. color: white;
173. font-size: .75em;
174. text-transform: uppercase;
176. /* #3 */
177. opacity: .7;
178. transition-duration: .25s;
179. transition-property: opacity;
180. }
182. .seq-next:hover,
183. .seq-prev:hover {
184. opacity: 1;
185. }
187. .seq-next,
188. .seq-prev,
189. .seq-pagination {
190. position: relative;
191. display: inline-block;
192. vertical-align: middle;
193. margin-top: 0;
194. }
196. .seq-pagination {
197. margin: 0 1em;
198. padding: 0;
199. }
201. .seq-pagination li {
202. /* #1 */
203. position: relative;
205. /* #2 */
206. list-style: none;
208. /* #3 */
209. display: inline-block;
210. vertical-align: middle;
212. /* #4 */
213. width: 50px;
214. height: 40px;
215. margin: 0 .25em;
216. }
218. .seq-pagination li:before {
219. /* #1 */
220. content: "";
221. display: block;
222. position: absolute;
223. top: 100%;
224. left: 50%;
225. width: 6px;
226. height: 6px;
227. margin-left: -3px;
228. margin-top: .5em;
229. border-radius: 50%;
230. background: white;
232. /* #2 */
233. opacity: 0;
234. transition-duration: .25s;
235. transition-property: opacity;
236. }
238. /*
239. * Show the indicator dot for the current link
240. */
241. .seq-pagination .seq-current:before {
242. opacity: .7;
243. }
245. /*
246. * Reset styles
247. */
248. .seq-pagination img,
249. .seq-pagination a {
250. display: block;
251. border: none;
252. }

body,
html,
.seq {

  /* #1 */
  width: 100%;
  height: 100%;

  /* #2 */
  margin: 0;
  padding: 0;
}
 
.seq {

  /* #1 */
  position: relative; 
  overflow: hidden; 
  font-family: sans-serif;
  color: white;
  text-align: center; 
  background-color: #2A93BC; 
  transition-duration: .5s;
  transition-property: background-color;
}
 
.seq-canvas,
.seq-canvas > * {

  /* #1 */
  height: 100%;
  width: 100%;

  /* #2 */
  margin: 0;
  padding: 0;
  list-style: none;
}

 
.seq-canvas > * {
  /* #1 */
  position: absolute;

  /* #2 */
  padding: 32px;
  box-sizing: border-box;

  /* #3 */
  height: auto;
  top: 0;
  bottom: 80px;
}

.seq-step1 {
  background-color: #102334; 
}

.seq-step2 {
  background-color:#1f1f1f;
}

.seq-step3 {
  background-color: #561295;
}

.feature {
  width: 70%;
  max-width: 100%;
  height: auto;
}

@media only screen and (min-width: 460px) and (min-height: 520px) {
  .feature {
    width: 100%;
  }
}


/* Ghost element */
.valign:before {
  content: "";
  height: 100%;
}

/* Vertically align the ghost and desired elements */
.valign:before,
.valign > .vcenter {
  display: inline-block;
  vertical-align: middle;
}

/* Remove 4px gap to allow consistent valign */
.valign {
  font-size: 0;
}

/* Reset font-size on valigned elements */
.valign > .vcenter {
  font-size: 16px;
}
 
.title {
  /* #1 */
  margin: 0;

  /* #2 */
  opacity: 0;
  transform: translateX(50px) translateZ(0);

  /* #3 */
  transition-duration: .5s;
  transition-property: opacity, transform;
}

/*
 * When a step is active, fade in to opaque and slide to the center
 */
.seq-in .title {
  opacity: 1;
  transform: translateX(0) translateZ(0);
}
 
.seq-out .title {
  opacity: 0;
  transform: translateX(-50px) translateZ(0);
}

 
.feature {
  transform: translateZ(0) scale(0);
  transition-duration: .5s;
  transition-property: transform, opacity;
}

 
.seq-in .feature {
  transform: translateZ(0) scale(1);
}
 
.seq-out .feature {
  transform: translateZ(0) scale(1);
  opacity: 0;
}
 
.nav {
  /* #1 */
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 2.5em;
  max-width: 640px;
  width: 100%;
 
  border: none;
  margin: 0 auto;
  padding: 0;
}

 
.seq-next,
.seq-prev {
  /* #1 */
  padding: 0;
  background: transparent;
  border: none;

  /* #2 */
  padding: .75em;
  cursor: pointer;
  color: white;
  font-size: .75em;
  text-transform: uppercase;

  /* #3 */
  opacity: .7;
  transition-duration: .25s;
  transition-property: opacity;
}

.seq-next:hover,
.seq-prev:hover {
  opacity: 1;
}
 
.seq-next,
.seq-prev,
.seq-pagination {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-top: 0;
}
 
.seq-pagination {
  margin: 0 1em;
  padding: 0;
}
 
.seq-pagination li {
  /* #1 */
  position: relative;

  /* #2 */
  list-style: none;

  /* #3 */
  display: inline-block;
  vertical-align: middle;

  /* #4 */
  width: 50px;
  height: 40px;
  margin: 0 .25em;
}
 
.seq-pagination li:before {
  /* #1 */
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: .5em;
  border-radius: 50%;
  background: white;

  /* #2 */
  opacity: 0;
  transition-duration: .25s;
  transition-property: opacity;
}

/*
 * Show the indicator dot for the current link
 */
.seq-pagination .seq-current:before {
  opacity: .7;
}

/*
 * Reset styles
 */
.seq-pagination img,
.seq-pagination a {
  display: block;
  border: none;
}

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Document</title>
6. <link rel="stylesheet" href="main.css">
7. </head>
8. <body>
9. <div id="sequence" class="seq">
10. <ul class="seq-canvas">
11. <li class="step1 valign seq-in">
12. <div class="vcenter">
13. <img data-seq class="feature" src="bmw.png" width="389" height="300" />
14. <h2 data-seq class="title">BMW Nova</h2>
15. </div>
16. </li>
17. <li class="step2 valign">
18. <div class="vcenter">
19. <img data-seq class="feature" src="bmw1.png" width="325" height="300" />
20. <h2 data-seq class="title">Blue Bmw</h2>
21. </div>
22. </li>
23. <li class="step3 valign">
24. <div class="vcenter">
25. <img data-seq class="feature" src="bmw2.png" width="325" height="300" />
26. <h2 data-seq class="title">Coming up</h2>
27. </div>
28. </li>
29. </ul>
31. <fieldset class="nav" aria-label="Slider buttons" aria-controls="sequence">
33. <button type="button" class="seq-prev" aria-label="Previous"><img src="prev.svg" alt="Previous" /></button>
35. <ul role="navigation" aria-label="Pagination" class="seq-pagination">
36. <li class="seq-current">
37. <a href="#step1" rel="step1" title="Go to bananas">
38. <img src="bmw.png" alt="Bananas" width="50" height="40" />
39. </a>
40. </li>
41. <li>
42. <a href="#step2" rel="step2" title="Go to coconut">
43. <img src="bmw1.png" alt="Coconut" width="50" height="40" />
44. </a>
45. </li>
46. <li>
47. <a href="#step3" rel="step3" title="Go to orange">
48. <img src="bmw2.png" alt="Orange" width="50" height="40" />
49. </a>
50. </li>
51. </ul>
53. <button type="button" class="seq-next" aria-label="Next"><img src="next.svg" alt="Next" /></button>
54. </fieldset>
56. </div>
57. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.min.js"></script>
59. <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
61. <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/sequence.min.2.1.0.js"></script>
62. <script>
63. var sequenceElement = document.getElementById("sequence");
65. var options = {
66. keyNavigation: true,
67. animateCanvas: false,
68. phaseThreshold: false,
69. reverseWhenNavigatingBackwards: true
70. }
72. var mySequence = sequence(sequenceElement, options);
74. </script>
75. </body>
76. </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
      <link rel="stylesheet" href="main.css">
 </head>
 <body>
     <div id="sequence" class="seq">
    <ul class="seq-canvas">
      <li class="step1 valign seq-in">
        <div class="vcenter">
          <img data-seq class="feature" src="bmw.png" width="389" height="300" />
          <h2 data-seq class="title">BMW Nova</h2>
        </div>
      </li>
      <li class="step2 valign">
        <div class="vcenter">
          <img data-seq class="feature" src="bmw1.png" width="325" height="300" />
          <h2 data-seq class="title">Blue Bmw</h2>
        </div>
      </li>
      <li class="step3 valign">
        <div class="vcenter">
          <img data-seq class="feature" src="bmw2.png" width="325" height="300" />
          <h2 data-seq class="title">Coming up</h2>
        </div>
      </li>
    </ul>

    <fieldset class="nav" aria-label="Slider buttons" aria-controls="sequence">

      <button type="button" class="seq-prev" aria-label="Previous"><img src="prev.svg" alt="Previous" /></button>

      <ul role="navigation" aria-label="Pagination" class="seq-pagination">
        <li class="seq-current">
          <a href="#step1" rel="step1" title="Go to bananas">
            <img src="bmw.png" alt="Bananas" width="50" height="40" />
          </a>
        </li>
        <li>
          <a href="#step2" rel="step2" title="Go to coconut">
            <img src="bmw1.png" alt="Coconut" width="50" height="40" />
          </a>
        </li>
        <li>
          <a href="#step3" rel="step3" title="Go to orange">
            <img src="bmw2.png" alt="Orange" width="50" height="40" />
          </a>
        </li>
      </ul>

      <button type="button" class="seq-next" aria-label="Next"><img src="next.svg" alt="Next" /></button>
    </fieldset>

  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
  
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/sequence.min.2.1.0.js"></script>
  <script>
     var sequenceElement = document.getElementById("sequence");

var options = {
  keyNavigation: true,
  animateCanvas: false,
  phaseThreshold: false,
  reverseWhenNavigatingBackwards: true
}

var mySequence = sequence(sequenceElement, options);
     
    </script>
 </body>
 </html>